/* panel-v2: restyle pagine di dettaglio, solo sotto body.test-environment. Specifica: docs/PianoRestyleDettaglio.md. Ritorno: tag pre-restyle-dettaglio o git revert. */

/* ---------- Pannello laterale per l'inserimento dati (BlazorModalShell Side="true") ----------
   Classe nh-side-panel su overlay e dialog. Larghezza 540px, variante .nh-side-panel-lg 720px. Solo token del sito, nessun colore nuovo.
   Il selettore ha una classe in piu' di modals-v2.css/site.css, quindi vince senza !important (tranne la riduzione del movimento). */

/* Overlay: pannello a destra, a tutta altezza. Lo sfondo resta sul ::before (mai sul contenitore: popup fixed dei DxDateEdit). */
body.test-environment .editor-modal.nh-side-panel {
  place-items: stretch end;
  padding: 0;
}

body.test-environment .editor-modal.nh-side-panel::before {
  background: rgba(15, 23, 42, .28);
  backdrop-filter: none;
}

body.test-environment .editor-dialog.nh-side-panel {
  position: relative;
  width: min(540px, 100%);
  height: 100dvh;
  max-height: none;
  border: 0;
  border-radius: 18px 0 0 18px;
  box-shadow: -1px 0 0 rgba(15, 23, 42, .06), -28px 0 56px -22px rgba(15, 23, 42, .42);
  animation: nh-panel-in .26s cubic-bezier(.16, 1, .3, 1) backwards;
}

body.test-environment .editor-dialog.nh-side-panel.nh-side-panel-lg {
  width: min(720px, 100%);
}

/* Striscia in alto come il banner delle pagine di dettaglio. */
body.test-environment .editor-dialog.nh-side-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  height: 4px;
  background: linear-gradient(90deg, #0f172a, var(--primary-strong) 58%, var(--primary-hero-end));
  pointer-events: none;
}

/* ---------- testata ---------- */
body.test-environment .editor-dialog.nh-side-panel .surface-head {
  flex: none;
  align-items: flex-start;
  gap: 12px;
  padding: 26px 22px 14px 28px;
  border-bottom: 0;
}

body.test-environment .editor-dialog.nh-side-panel .surface-head h2 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.15;
}

/* Nel pannello l'eyebrow (contesto) resta visibile se la pagina lo passa. */
body.test-environment .editor-dialog.nh-side-panel .surface-head .eyebrow {
  display: block;
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

body.test-environment .editor-dialog.nh-side-panel .modal-shell-close-button {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 24px;
}

/* ---------- corpo (scorre da solo) e vassoio azioni fisso in basso ---------- */
body.test-environment .editor-dialog.nh-side-panel:not(.smart-table-settings-dialog) .editor-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px 28px 24px;
  /* Colonna che riempie l'altezza: il form si allunga e spinge il vassoio azioni in fondo anche con pochi campi. */
  display: flex;
  flex-direction: column;
}

body.test-environment .editor-dialog.nh-side-panel:not(.smart-table-settings-dialog) .editor-body > form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  /* Distanza minima fra campi e vassoio quando il form e' lungo (il margine automatico del vassoio vale 0). */
  gap: 24px;
}

/* Il vassoio sta dentro il form, dentro il corpo che scorre: sticky in fondo, con sbordo pari al padding del corpo. */
body.test-environment .editor-dialog.nh-side-panel:not(.smart-table-settings-dialog) .modal-form-actions {
  bottom: -24px;
  /* Margine alto automatico: con form corti il vassoio scende in fondo al pannello. */
  margin: auto -28px -24px;
  padding: 14px 28px;
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
}

/* ---------- telefono: foglio dal basso ---------- */
@media (max-width: 560px) {
  body.test-environment .editor-modal.nh-side-panel {
    place-items: end stretch;
  }

  body.test-environment .editor-dialog.nh-side-panel,
  body.test-environment .editor-dialog.nh-side-panel.nh-side-panel-lg {
    width: 100%;
    height: 92dvh;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -16px 40px -14px rgba(15, 23, 42, .4);
    animation: nh-panel-sheet .26s cubic-bezier(.16, 1, .3, 1) backwards;
  }

  body.test-environment .editor-dialog.nh-side-panel .surface-head {
    padding: 22px 10px 12px 18px;
  }

  body.test-environment .editor-dialog.nh-side-panel .modal-shell-close-button {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
  }

  body.test-environment .editor-dialog.nh-side-panel:not(.smart-table-settings-dialog) .editor-body {
    padding: 8px 18px 20px;
  }

  body.test-environment .editor-dialog.nh-side-panel:not(.smart-table-settings-dialog) .modal-form-actions {
    bottom: -20px;
    margin: auto -18px -20px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  }

  body.test-environment .editor-dialog.nh-side-panel .modal-form-actions .btn {
    min-height: 44px;
  }
}

@keyframes nh-panel-in {
  from {
    opacity: 0;
    transform: translateX(36px);
  }
}

@keyframes nh-panel-sheet {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.test-environment .editor-dialog.nh-side-panel {
    animation: none !important;
  }
}