/* ==========================================================================
   ✅ DASHBOARD-UTILITY.CSS
   Descrizione: Utility CSS specifiche per la dashboard Vetrineshop
   Consolidato: 14 Luglio 2025
   ========================================================================= */

/* Nasconde elementi in modo sicuro */
.is-hidden,
.hidden {
  display: none !important;
  visibility: hidden;
}

/* Mostra elementi forzatamente */
.is-visible {
  display: block !important;
  visibility: visible;
}

/* Spinner semplice */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid #ccc;
  border-top-color: #0073aa;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-left: 8px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Margini rapidi */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

/* Text center */
.text-center {
  text-align: center;
}

/* Opacità durante il caricamento */
.loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

/* Container fluido (usato per contenuti centrati) */
.dashboard-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

/* Titoli con icona */
.icona-titolo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 1rem;
}
/* ==========================================================
   🔧 Magazine Home – ritmo verticale dei fascioni
   ========================================================== */

/* 1) una sola manopola per lo spazio tra i blocchi */
:root{
  --mag-home-gap: 56px;     /* ↓ prova 48px / 40px se vuoi ancora più compatto */
}

/* 2) riduci il margin-bottom dei fascioni (override globale) */
.mag-fascione--1,
.mag-fascione--2,
.mag-fascione--3,
.mag-fascione--4{
  margin-bottom: var(--mag-home-gap) !important;
}

/* 3) piccoli ritocchi opzionali per i sottoblocchi interni (se li usi) */
.mag-fascione--2 .mag-fascione__head,
.mag-fascione--3 .mag-fascione__head{
  margin-bottom: 12px !important;
}

/* 4) se F4 ha un separatore proprio, compensiamo leggermente */
.mag-fascione--4{ 
  /* se vedi ancora troppo spazio sotto F4 riduci qui di qualche px */
  /* margin-bottom: calc(var(--mag-home-gap) - 8px) !important; */
}