/* ===========================
   Placeholder / Skeleton
=========================== */

.is-loading{
  position: relative;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.is-loading *{
  color: transparent !important;
}

.is-loading .icon-box,
.is-loading .label,
.is-loading .value,
.is-loading .section-title,
.is-loading .subtitle,
.is-loading .info-title,
.is-loading .info-label,
.is-loading .badge,
.is-loading .badge-soft,
.is-loading .form-label,
.is-loading h1,
.is-loading h2,
.is-loading h3,
.is-loading h4,
.is-loading h5,
.is-loading p,
.is-loading span,
.is-loading strong,
.is-loading small,
.is-loading td,
.is-loading th,
.is-loading li,
.is-loading a{
  position: relative;
  color: transparent !important;
  background: rgba(255,255,255,.06) !important;
  border-color: transparent !important;
  border-radius: 10px;
}

/* brilho animado */
.is-loading::after{
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.06) 35%,
    rgba(255,255,255,.16) 50%,
    rgba(255,255,255,.06) 65%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.4s infinite;
  z-index: 2;
  pointer-events: none;
}

@keyframes skeleton-shimmer{
  100%{
    transform: translateX(100%);
  }
}

/* ===========================
   Ajustes por tipo de bloco
=========================== */

/* cards pequenos */
.is-loading.mini-stat .icon-box{
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.is-loading.mini-stat .label{
  display: block;
  width: 65%;
  height: 14px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.is-loading.mini-stat .value{
  display: block;
  width: 45%;
  height: 28px;
  border-radius: 12px;
}

/* títulos e subtítulos */
.is-loading .section-title{
  display: inline-block;
  width: 220px;
  height: 20px;
}

.is-loading .subtitle{
  display: inline-block;
  width: 160px;
  height: 14px;
  margin-top: 6px;
}

/* hero */
.is-loading.hero h1{
  display: block;
  width: 280px;
  height: 30px;
  margin-bottom: 12px;
  border-radius: 12px;
}

.is-loading.hero p{
  display: block;
  width: 70%;
  height: 16px;
  border-radius: 10px;
}

.is-loading.hero .badge-soft{
  width: 120px;
  height: 34px;
  border-radius: 999px;
}

/* info-box */
.is-loading .info-title{
  display: block;
  width: 180px;
  height: 18px;
  margin-bottom: 16px;
}

.is-loading .info-label{
  display: block;
  width: 110px;
  height: 12px;
  margin-bottom: 6px;
}

.is-loading .info-value,
.is-loading .info-box div:not(.info-title):not(.info-label){
  min-height: 16px;
}

/* tabela */
.is-loading table{
  opacity: 1 !important;
}

.is-loading tbody tr{
  border-color: transparent !important;
}

.is-loading tbody td,
.is-loading thead th{
  height: 18px;
}

/* lista de chips */
.is-loading .chip-item{
  min-width: 120px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.06) !important;
}

/* gráfico placeholder */
.chart-loading{
  position: relative;
  min-height: 320px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    repeating-linear-gradient(
      to top,
      rgba(255,255,255,.04) 0,
      rgba(255,255,255,.04) 1px,
      transparent 1px,
      transparent 52px
    );
  overflow: hidden;
}

.chart-loading::before{
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 18px;
  top: 18px;
  border-radius: 14px;
  background:
    linear-gradient(
      90deg,
      rgba(30,144,255,.18) 0%,
      rgba(32,201,151,.16) 45%,
      rgba(245,159,0,.14) 100%
    );
  clip-path: polygon(
    0 85%, 8% 82%, 16% 78%, 24% 72%, 32% 68%, 40% 60%, 48% 58%, 56% 48%,
    64% 50%, 72% 38%, 80% 34%, 88% 24%, 100% 18%, 100% 100%, 0 100%
  );
  opacity: .55;
}

.chart-loading::after{
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.05) 35%,
    rgba(255,255,255,.14) 50%,
    rgba(255,255,255,.05) 65%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.4s infinite;
}

/*
COMO APLICAR
//Exemplo em card pequeno
<div class="card-dark mini-stat is-loading">
  <div class="d-flex justify-content-between align-items-start mb-3">
    <div class="icon-box"><i class="bi bi-trophy-fill"></i></div>
    <span class="badge text-bg-primary">História</span>
  </div>
  <div class="label">Copas do Mundo</div>
  <div class="value">5</div>
</div>

//Exemplo em bloco de informações
<div class="card-dark p-3 p-lg-4 is-loading">
  <h2 class="section-title">Resumo Geral da Seleção</h2>
  <p class="subtitle">Informações institucionais</p>

  <div class="info-box mt-3">
    <div class="info-title">Dados principais</div>
    <div class="info-label">Nome</div>
    <div class="info-value">Brasil</div>
  </div>
</div>

//Exemplo para gráfico
<div class="card-dark p-3 p-lg-4">
  <h2 class="section-title">Distribuição do Elenco</h2>
  <div class="chart-loading mt-3"></div>
</div>

//Para remover o loading via JavaScript
document.querySelectorAll('.is-loading').forEach(el => {
  el.classList.remove('is-loading');
});
*/