/* SKELETON LOADER — gscalcio.it */

@keyframes sk-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.sk {
  display: inline-block;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.13) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 600px 100%;
  animation: sk-shimmer 1.5s ease-in-out infinite;
}
.sk-line  { display: block; height: 13px; border-radius: 3px; margin-bottom: 8px; }
.sk-title { display: block; height: 20px; border-radius: 3px; margin-bottom: 14px; }
.sk-avatar{ border-radius: 50%; flex-shrink: 0; }
.sk-badge { display: inline-block; height: 22px; border-radius: 20px; }
.sk-btn   { display: inline-block; height: 34px; border-radius: 6px; }
.sk-w25 { width: 25%; } .sk-w40 { width: 40%; }
.sk-w60 { width: 60%; } .sk-w75 { width: 75%; } .sk-w100 { width: 100%; }

/* TABLE */
.sk-table { width: 100%; border-collapse: collapse; }
.sk-table thead th,
.sk-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* CARD */
.sk-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 20px;
}

/* STAT GRID */
.sk-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
}
.sk-stat-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 18px 16px;
}

/* LIST */
.sk-list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sk-list-item:last-child { border-bottom: none; }

/* SPINNER inline */
@keyframes sk-spin { to { transform: rotate(360deg); } }
.sk-spin {
  display: inline-block;
  width: 15px; height: 15px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sk-spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 5px;
}

/* OVERLAY sezione durante AJAX */
.sk-loading { position: relative; pointer-events: none; }
.sk-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10,20,40,0.45);
  backdrop-filter: blur(2px);
  border-radius: inherit;
  z-index: 9;
}

/* FADE-IN contenuto reale */
.sk-fade-in { animation: sk-fadein 0.3s ease; }
@keyframes sk-fadein {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}