/* ============================================================
   Skeleton loaders — placeholders de carregamento (shimmer).
   Usos:
   1. Overlay de NAVEGAÇÃO (.page-skeleton): mostrado por JS ao navegar
      (clique em link interno / submit) até a próxima página renderizar.
      Cobre os shells dashboard, auth/cadastro e público via layouts compartilhados.
   2. Classes utilitárias (.skeleton, .skeleton-line, .skeleton-circle,
      .skeleton-card) reutilizáveis em seções carregadas via AJAX.
   Respeita whitelabel (usa tokens/--bs-*) e prefers-reduced-motion.
   ============================================================ */

:root {
  /* Sistema CLARO: o skeleton é sempre um cinza-claro sobre fundo branco. Valores
     EXPLÍCITOS (sem var(--bs-gray-*)/var(--bs-body-bg)): essas vars não são definidas
     pelo projeto e, dependendo do contexto/tema do Bootstrap, poderiam resolver escuro,
     deixando o skeleton com fundo escuro. Placeholders de carregamento são neutros (não
     são cor de marca), então o claro fixo é o correto para o whitelabel. */
  --skeleton-base: var(--color-bs-gray-200);
  --skeleton-shine: var(--color-surface-shine);
  --skeleton-surface: var(--color-white);
  --skeleton-radius: 0.5rem;
}

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

.skeleton,
.skeleton-line,
.skeleton-circle,
.skeleton-card {
  background-color: var(--skeleton-base);
  background-image: linear-gradient(
    90deg,
    var(--skeleton-base) 0%,
    var(--skeleton-shine) 50%,
    var(--skeleton-base) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--skeleton-radius);
  display: block;
}

.skeleton-line {
  height: 0.85rem;
  margin-bottom: 0.6rem;
  border-radius: 0.35rem;
}
.skeleton-line.is-sm { width: 40%; }
.skeleton-line.is-md { width: 65%; }
.skeleton-line.is-lg { width: 90%; }
.skeleton-line.is-title { height: 1.4rem; width: 50%; margin-bottom: 0; }
.skeleton-line.is-chip {
  width: 8rem;
  height: 2.25rem;
  margin-left: auto;
  margin-bottom: 0;
  border-radius: 999px;
}

.skeleton-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  flex: 0 0 auto;
}

.skeleton-card {
  min-height: 9rem;
  border-radius: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton, .skeleton-line, .skeleton-circle, .skeleton-card { animation: none; }
}

/* ---- Overlay de navegação (cobre o conteúdo enquanto a próxima página carrega) ---- */
.page-skeleton {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--skeleton-surface, #fff);
  padding: clamp(1rem, 2vw, 1.5rem);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
}
.page-skeleton.is-active {
  opacity: 1;
  visibility: visible;
}
.page-skeleton__bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 35%;
  background: var(--color-primary, var(--bs-primary, #6f42c1));
  animation: skeleton-progress 1.1s ease-in-out infinite;
}
@keyframes skeleton-progress {
  0% { left: -35%; }
  100% { left: 100%; }
}
.page-skeleton__shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  width: min(100%, 1200px);
  margin-inline: auto;
}

.page-skeleton__sidebar {
  display: none;
}

.page-skeleton__content {
  min-width: 0;
}

.page-skeleton__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.page-skeleton__toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.page-skeleton__toolbar .skeleton-line {
  margin-bottom: 0;
}

.page-skeleton__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.page-skeleton__panel {
  border: 1px solid var(--color-bs-gray-300);
  border-radius: 0.75rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  background: var(--skeleton-surface, #fff);
}

.page-skeleton__panel .skeleton-line:last-child,
.page-skeleton__sidebar .skeleton-line:last-child {
  margin-bottom: 0;
}

.admin-dashboard .page-skeleton__shell,
.partner-dashboard .page-skeleton__shell,
.customer-dashboard .page-skeleton__shell {
  width: 100%;
  margin-inline: 0;
}

/* O menu lateral e a topbar da área logada são FIXOS — NÃO recebem skeleton.
   No dashboard, o overlay de navegação cobre SOMENTE a área de conteúdo central:
   é deslocado para começar após o menu lateral e abaixo da topbar, e a sidebar
   falsa do skeleton fica oculta (mantém display:none). */
@media (min-width: 992px) {
  .admin-dashboard .page-skeleton,
  .partner-dashboard .page-skeleton,
  .customer-dashboard .page-skeleton {
    left: var(--sidebar-width);
    top: var(--topbar-height);
  }

  .admin-dashboard .page-skeleton__bar,
  .partner-dashboard .page-skeleton__bar,
  .customer-dashboard .page-skeleton__bar {
    left: var(--sidebar-width);
    top: var(--topbar-height);
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .page-skeleton__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .page-skeleton {
    padding: 0.875rem;
  }

  .page-skeleton__header {
    align-items: flex-start;
    margin-bottom: 1rem;
  }

  .page-skeleton__header .skeleton-circle {
    width: 2.25rem;
    height: 2.25rem;
  }

  .page-skeleton__header .is-title {
    width: 72%;
  }

  .page-skeleton__header .is-chip {
    display: none;
  }

  .page-skeleton__toolbar {
    display: block;
  }

  .page-skeleton__toolbar .skeleton-line {
    width: 100%;
    margin-bottom: 0.75rem;
  }

  .page-skeleton__grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  .skeleton-card {
    min-height: 6.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-skeleton__bar { animation: none; width: 100%; }
}