/* Estilo proprio: as tres bases usam stacks diferentes (Tailwind no admin,
   Bootstrap nas demais). Depender de uma delas exigiria tres versoes do markup.
   As variaveis de tema abaixo ja existem nas bases. */

#loading-overlay {
  /* Cores proprias do componente. Nas bases Bootstrap herdam as variaveis de
     tema; na base admin, que usa Tailwind com dark por classe e nao define
     essas variaveis, o bloco .dark abaixo cobre o tema escuro. */
  --lo-caixa-bg: var(--color-bg-secondary, #ffffff);
  --lo-texto: var(--color-text-primary, #24292f);
  --lo-borda: var(--color-border, #d0d7de);
  --lo-acento: var(--color-accent, #1f7aec);
  --lo-btn-bg: var(--color-bg-primary, #ffffff);

  position: fixed;
  inset: 0;
  z-index: 2000; /* acima da navbar, que fica em 1080 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}

#loading-overlay[hidden] {
  display: none;
}

/* Armado: captura cliques (o container continua fixed/inset-0) mas nao
   aparece. Impede o duplo clique durante os 300ms do delay. */
#loading-overlay.loading-overlay--armado {
  background: transparent;
}

#loading-overlay.loading-overlay--armado .loading-overlay__caixa {
  visibility: hidden;
}

:root.dark #loading-overlay {
  --lo-caixa-bg: #161b22;
  --lo-texto: #c9d1d9;
  --lo-borda: #30363d;
  --lo-acento: #66a6ff;
  --lo-btn-bg: #0d1117;
}

.loading-overlay__caixa {
  background: var(--lo-caixa-bg);
  color: var(--lo-texto);
  border: 1px solid var(--lo-borda);
  border-radius: 0.75rem;
  padding: 1.75rem 2rem;
  min-width: 260px;
  max-width: 90vw;
  text-align: center;
  box-shadow: 0 18px 48px -18px rgba(0, 0, 0, 0.6);
}

.loading-overlay__spinner {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto 1rem;
  border: 3px solid var(--lo-borda);
  border-top-color: var(--lo-acento);
  border-radius: 50%;
  animation: loading-overlay-girar 0.8s linear infinite;
}

@keyframes loading-overlay-girar {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .loading-overlay__spinner {
    animation-duration: 2.4s;
  }
}

.loading-overlay__msg {
  margin: 0;
  font-weight: 600;
}

.loading-overlay__falha-msg {
  margin: 1rem 0 0.75rem;
  font-weight: 500;
}

.loading-overlay__falha-btn {
  border: 1px solid var(--lo-borda);
  background: var(--lo-btn-bg);
  color: var(--lo-texto);
  border-radius: 0.5rem;
  padding: 0.45rem 1.25rem;
  font-weight: 600;
  cursor: pointer;
}

/* Modo inline: spinner dentro do proprio elemento, sem bloquear a tela. */
.loading-inline {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--lo-borda);
  border-top-color: var(--lo-acento);
  border-radius: 50%;
  animation: loading-overlay-girar 0.8s linear infinite;
}