/* =============================================================
   style.css — Tema chiaro "Scatolificio Sarno": animazioni e
   componenti custom non esprimibili con le sole utility Tailwind.
   ============================================================= */

:root {
  color-scheme: light;
}

html, body {
  height: 100%;
  background: #f4f5f7;
  overscroll-behavior-y: contain;
}

body {
  font-family: 'Inter', sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.font-display { letter-spacing: 0.02em; }

/* ---- Scrollbar discreta ---------------------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d3d6db; border-radius: 999px; }

/* ---- Card "targa" con rivetti agli angoli ------------------ */
.card-plate {
  position: relative;
  background: #ffffff;
  border: 1px solid #e3e5e9;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.05);
}
.card-plate::before,
.card-plate::after,
.card-plate .rivet-tl,
.card-plate .rivet-tr {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #cfd2d8;
  box-shadow: inset 0 1px 1px rgba(15,23,42,0.15), 0 1px 0 rgba(255,255,255,0.6);
}
.card-plate::before { top: 6px; left: 6px; }
.card-plate::after { top: 6px; right: 6px; }

/* ---- Skeleton loading -------------------------------------- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: #edeef1;
  border-radius: 0.6rem;
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(15,23,42,0.06), transparent);
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  100% { transform: translateX(100%); }
}

/* ---- Toast enter/exit --------------------------------------- */
.toast-enter { animation: toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1); }
.toast-exit { animation: toast-out 200ms ease-in forwards; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(-8px) scale(0.97); }
}

/* ---- Bottom nav ----------------------------------------------- */
.nav-item {
  position: relative;
  transition: color 160ms ease, transform 160ms ease;
  z-index: 0;
}
.nav-item::before {
  content: '';
  position: absolute;
  inset: 2px 10px;
  border-radius: 14px;
  background: rgba(47, 79, 146, 0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(47, 79, 146, 0.18);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1), transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}
.nav-active {
  color: #2f4f92 !important;
}
.nav-active::before {
  opacity: 1;
  transform: scale(1);
}
.nav-active .nav-icon-wrap {
  transform: translateY(-2px);
}
.nav-active .nav-dot {
  opacity: 1;
  transform: scale(1);
}
.nav-dot {
  opacity: 0;
  transform: scale(0.4);
  transition: all 160ms ease;
}

/* ---- Transizione "glass" 3D tra le sezioni principali -----------------
   Le due sezioni (quella che esce e quella che entra) si sovrappongono
   per la durata dell'animazione: la nuova vista scivola dentro come un
   pannello di vetro, con una leggera rotazione prospettica e uno zoom
   ottico (scala + blur che si risolve), nella direzione data dalla
   posizione dei tab (avanti = da destra, indietro = da sinistra).      */
.view-host {
  position: relative;
  overflow-x: hidden;
  perspective: 1400px;
}
.view-leaving {
  /* position, top, left, width vengono impostati inline da app.js in px,
     calcolati dal layout reale, per restare perfettamente allineati alla
     vista che sta entrando anche con il padding del contenitore */
  z-index: 1;
  pointer-events: none;
  will-change: transform, opacity, filter;
}
.view-entering {
  position: relative;
  z-index: 2;
  will-change: transform, opacity, filter;
}
.view-entering::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.30) 46%, rgba(255,255,255,0.05) 56%, transparent 72%);
  mix-blend-mode: overlay;
  transform: translateX(-130%);
  animation: glass-sheen 420ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes glass-sheen {
  to { transform: translateX(130%); }
}

@keyframes glass-exit-left {
  0%   { opacity: 1; filter: blur(0) brightness(1);     transform: translateX(0) translateZ(0) rotateY(0deg) scale(1); }
  100% { opacity: 0; filter: blur(10px) brightness(1.2); transform: translateX(-22%) translateZ(-90px) rotateY(12deg) scale(0.9); }
}
@keyframes glass-exit-right {
  0%   { opacity: 1; filter: blur(0) brightness(1);     transform: translateX(0) translateZ(0) rotateY(0deg) scale(1); }
  100% { opacity: 0; filter: blur(10px) brightness(1.2); transform: translateX(22%) translateZ(-90px) rotateY(-12deg) scale(0.9); }
}
@keyframes glass-enter-from-right {
  0%   { opacity: 0; filter: blur(16px) brightness(1.3); transform: translateX(32%) translateZ(-70px) rotateY(-16deg) scale(1.1); }
  55%  { filter: blur(3px) brightness(1.08); }
  100% { opacity: 1; filter: blur(0) brightness(1);      transform: translateX(0) translateZ(0) rotateY(0deg) scale(1); }
}
@keyframes glass-enter-from-left {
  0%   { opacity: 0; filter: blur(16px) brightness(1.3); transform: translateX(-32%) translateZ(-70px) rotateY(16deg) scale(1.1); }
  55%  { filter: blur(3px) brightness(1.08); }
  100% { opacity: 1; filter: blur(0) brightness(1);      transform: translateX(0) translateZ(0) rotateY(0deg) scale(1); }
}

.view-exit-to-left    { animation: glass-exit-left 360ms cubic-bezier(0.32, 0, 0.67, 0) forwards; }
.view-exit-to-right   { animation: glass-exit-right 360ms cubic-bezier(0.32, 0, 0.67, 0) forwards; }
.view-enter-from-right{ animation: glass-enter-from-right 420ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.view-enter-from-left { animation: glass-enter-from-left 420ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* ---- Tab storico (modale drill-down consumi) ------------------------ */
.history-tab { color: #70747c; transition: all 160ms ease; }
.history-tab-active {
  background: rgba(47, 79, 146, 0.10) !important;
  border-color: rgba(47, 79, 146, 0.5) !important;
  color: #24406f !important;
}

/* ---- Scanner mode buttons -------------------------------------- */
#mode-deposito, #mode-prelievo {
  transition: all 180ms ease;
}
.mode-active-deposito {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
  color: #047857 !important;
  transform: scale(1.02);
}
.mode-active-prelievo {
  background: rgba(47, 79, 146, 0.10) !important;
  border-color: rgba(47, 79, 146, 0.5) !important;
  color: #24406f !important;
  transform: scale(1.02);
}

/* ---- Tab categoria magazzino -------------------------------------- */
.category-tab, .import-category-tab { transition: all 160ms ease; color: #70747c; }
.category-tab-active, .import-category-tab-active {
  background: rgba(47, 79, 146, 0.10) !important;
  border-color: rgba(47, 79, 146, 0.5) !important;
  color: #24406f !important;
}

/* ---- Reader camera ---------------------------------------------- */
#scanner-reader {
  border-radius: 0.85rem;
  overflow: hidden;
  border: 2px dashed #b8bcc3;
  background: #14161a;
}
#scanner-reader video { border-radius: 0.7rem; }
#scanner-reader,
#product-barcode-scanner-reader {
  cursor: crosshair;
  position: relative;
}
#product-barcode-scanner-reader {
  border-radius: 0.85rem;
  overflow: hidden;
  border: 2px dashed #b8bcc3;
  background: #14161a;
}
#product-barcode-scanner-reader video { border-radius: 0.7rem; }

/* Anello di feedback visivo al tocco per la messa a fuoco manuale */
.focus-ring {
  position: absolute;
  width: 56px;
  height: 56px;
  margin-left: -28px;
  margin-top: -28px;
  border: 2px solid #6f8fcf;
  border-radius: 999px;
  pointer-events: none;
  z-index: 20;
  animation: focus-ring-anim 550ms ease-out forwards;
}
@keyframes focus-ring-anim {
  0% { transform: scale(1.35); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: scale(0.85); opacity: 0; }
}

/* ---- Modal (generico: product-modal, field-picker-modal, article-history-modal) --- */
#product-modal, #field-picker-modal, #article-history-modal {
  transition: opacity 200ms ease;
  opacity: 0;
}
#product-modal.modal-visible, #field-picker-modal.modal-visible, #article-history-modal.modal-visible { opacity: 1; }
#product-modal .modal-panel, #field-picker-modal .modal-panel, #article-history-modal .modal-panel {
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease;
  transform: translateY(16px) scale(0.98);
  opacity: 0;
}
#product-modal.modal-visible .modal-panel,
#field-picker-modal.modal-visible .modal-panel,
#article-history-modal.modal-visible .modal-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* ---- Barra consumi (dashboard) ----------------------------------- */
.bar-grow {
  width: 0;
  animation: bar-grow 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes bar-grow {
  to { width: var(--target-width); }
}

/* ---- Pulsazione pulsante scan attivo ------------------------------- */
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(47, 79, 146, 0.30); }
  100% { box-shadow: 0 0 0 14px rgba(47, 79, 146, 0); }
}
.scan-pulse { animation: pulse-ring 1.8s ease-out infinite; }

/* ---- Undo/Redo -------------------------------------------------- */
.history-btn {
  transition: all 160ms ease;
}
.history-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ---- Focus visibile per accessibilità -------------------------------- */
:focus-visible {
  outline: 2px solid #2f4f92;
  outline-offset: 2px;
}

/* ---- Riduzione animazioni per chi la richiede -------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}