/* ============================================================
   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,
.skeleton-input,
.skeleton-btn {
  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%; }
}

/* ============================================================
   Variantes de conteúdo do dashboard (data-variant no #page-skeleton).
   O JS (navigation-skeleton.js) define a variante conforme a rota de
   destino; o CSS mostra só o bloco correspondente.
   ============================================================ */
.page-skeleton__variant { display: none; }
.page-skeleton[data-variant="default"] [data-variant-content="default"],
.page-skeleton[data-variant="table"]   [data-variant-content="table"],
.page-skeleton[data-variant="detail"]  [data-variant-content="detail"],
.page-skeleton[data-variant="form"]    [data-variant-content="form"] {
  display: block;
}
/* Fallback: se a variante não casar com nenhuma conhecida, mostra o overview. */
.page-skeleton:not([data-variant="table"]):not([data-variant="detail"]):not([data-variant="form"]) [data-variant-content="default"] {
  display: block;
}

/* ---- Variante TABELA / lista ---- */
.page-skeleton__table {
  border: 1px solid var(--color-bs-gray-300);
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--skeleton-surface, #fff);
}
.page-skeleton__trow {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1.5fr 1fr;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--color-bs-gray-200);
}
.page-skeleton__trow:last-child { border-bottom: 0; }
.page-skeleton__trow .skeleton-line { margin-bottom: 0; width: 100%; }
.page-skeleton__trow.is-head { background: var(--color-bs-gray-100, #f5f5f7); }
.page-skeleton__trow.is-head .skeleton-line { height: 0.7rem; }

/* ---- Variante DETALHE ---- */
.page-skeleton__detailhero {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.page-skeleton__detaillines {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.page-skeleton__detaillines .skeleton-line { margin-bottom: 0; }
.page-skeleton__kv {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}
.page-skeleton__kvitem {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.page-skeleton__kvitem .skeleton-line { margin-bottom: 0; }

/* ---- Variante FORM / campos (reusada também no card de auth) ---- */
.page-skeleton__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}
.page-skeleton__field .skeleton-line { margin-bottom: 0; }
.skeleton-line.is-label { width: 30%; height: 0.7rem; }
.skeleton-input { height: 2.9rem; border-radius: 0.5rem; }
.skeleton-btn { height: 3rem; border-radius: 0.5rem; width: 100%; }
.skeleton-btn.is-inline { width: 12rem; max-width: 100%; }
.skeleton-line.is-center,
.is-center { margin-inline: auto; }
.skeleton-circle.is-lg { width: 3.5rem; height: 3.5rem; }

/* ============================================================
   Skeleton do layout de AUTENTICAÇÃO (card centralizado).
   ============================================================ */
.page-skeleton--auth {
  display: grid;
  place-items: center;
}
.page-skeleton__authcard {
  width: min(100%, 460px);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--skeleton-surface, #fff);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--color-bs-gray-200);
}
.page-skeleton__authhead {
  background: var(--color-primary, var(--bs-primary, #6f42c1));
  min-height: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-skeleton__brand {
  display: block;
  width: 55%;
  height: 2.25rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.35);
}
.page-skeleton__authbody {
  padding: clamp(1.25rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.page-skeleton__authbody .skeleton-line { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .skeleton-input, .skeleton-btn { animation: none; }
}