/* shared/skeleton.css
   ────────────────────────────────────────────────────────────────────────
   Skeleton UI utilitario: shimmer animato per placeholder durante fetch.
   Drop-in: aggiungere class="nh-skel" all'elemento + dimensioni inline.

   Esempi:
     <div class="nh-skel" style="width:200px;height:14px"></div>
     <div class="nh-skel nh-skel-circle" style="width:48px;height:48px"></div>
     <div class="nh-skel-card"> [...skeleton card pre-built...] </div>

   🚫 NO HARDCODED color: usa CSS vars di NH theme (--surface, --border).
   ──────────────────────────────────────────────────────────────────────── */

.nh-skel {
  display: inline-block;
  background: linear-gradient(90deg,
    var(--surface-2, #f1f5f9) 0%,
    var(--surface, #fff) 50%,
    var(--surface-2, #f1f5f9) 100%);
  background-size: 200% 100%;
  animation: nh-skel-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
  vertical-align: middle;
}
.nh-skel-circle { border-radius: 50%; }
.nh-skel-line   { display: block; height: 12px; margin: 6px 0; }

[data-theme="dark"] .nh-skel {
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,.04) 100%);
}

@keyframes nh-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Card pre-built: simula la card cliente di clients.html (avatar + 3 righe + footer) */
.nh-skel-card {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 14px;
  background: var(--surface, #fff);
  display: flex; flex-direction: column; gap: 10px;
  min-height: 220px;
}
.nh-skel-card .nh-skel-row {
  display: flex; align-items: center; gap: 10px;
}
.nh-skel-card .nh-skel-row .nh-skel-circle { flex-shrink: 0; }
.nh-skel-card .nh-skel-row .nh-skel-stack { flex: 1; display: flex; flex-direction: column; gap: 6px; }

/* Helper container per griglia di skeleton card durante list view fetch */
.nh-skel-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* Skeleton table row */
.nh-skel-tr td { padding: 10px 12px; }
.nh-skel-tr td .nh-skel { width: 80%; height: 12px; }

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .nh-skel { animation: none; opacity: .6; }
}