/* Tela de carregamento com Material Design (MD3) para Dash */
:root {
  /* Paleta Material Design (MD3) */
  --md-primary: #3F51B5;         /* Indigo 500 */
  --md-primary-600: #3949AB;     /* Indigo 600 */
  --md-primary-a200: #536DFE;    /* Indigo A200 */
  --md-secondary: #009688;       /* Teal 500 */
  --md-secondary-a400: #1DE9B6;  /* Teal A400 */
  --md-amber-400: #FFCA28;       /* Amber 400 */
  --md-amber-500: #FFC107;       /* Amber 500 */
  --md-amber-600: #FFB300;       /* Amber 600 */
  --md-surface-dark: #121212;    /* Base escura */
  --md-on-surface: #FFFFFF;

  /* Tokens visuais */
  --loading-fg: var(--md-on-surface);
  --loading-fg-muted: #ffffff30;
  --ring-size: 56px;
  --ring-border: 4px;
  --blur-radius: 60px;
  --text-shadow: 0 2px 10px rgba(0,0,0,.25);
  --font-size: clamp(1rem, 1.2vw + .6rem, 1.25rem);
  --letter-spacing: .02em;

  /* Gradiente material: primária -> secundária */
  --loading-bg-start: var(--md-primary);
  --loading-bg-end: var(--md-secondary);
}

/* Container principal do loader do Dash */
._dash-loading {
  color: transparent;

  /* Cobrir toda a viewport sem bleed de fundo */
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  width: 100vw;
  height: 100vh;

  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* Fundo: base sólida + gradiente (evita flash branco no 1º frame) */
  background-color: var(--md-surface-dark);
  background-image:
    radial-gradient(1200px 800px at 80% 20%, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(135deg, var(--loading-bg-start) 0%, var(--loading-bg-end) 100%);
  background-size: 200% 200%;
  background-blend-mode: screen, normal;
  animation: bgShift 8s ease-in-out infinite;

  isolation: isolate;
  overflow: hidden;

  /* Evitar contornos e overscroll que possam exibir bordas */
  outline: none;
}

/* Texto de status */
._dash-loading::before {
  content: "Aguarde, carregando...";
  color: var(--loading-fg);
  font-size: var(--font-size);
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
  margin-bottom: 22px;
  text-shadow: var(--text-shadow);
  animation:
    fadeInUp 500ms ease-out 100ms both,
    pulse 2s ease-in-out 400ms infinite;
  z-index: 1;
  will-change: opacity, transform;
}

/* Spinner (progresso indeterminado) com acento Amber */
._dash-loading::after {
  content: "";
  width: var(--ring-size);
  height: var(--ring-size);
  border-radius: 50%;
  display: inline-block;
  position: relative;
  z-index: 1;

  /* Anel base translúcido + topo com cores MD */
  border: var(--ring-border) solid var(--loading-fg-muted);
  border-top-color: var(--md-amber-500);
  border-right-color: var(--md-amber-400);

  /* Movimento material: fast-out-slow-in */
  animation: spin 900ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite;

  /* Glow sutil */
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.04) inset,
    0 6px 18px rgba(0,0,0,0.25),
    0 0 18px rgba(255, 193, 7, 0.25);
}

/* Elementos decorativos opcionais (se adicionados no DOM) */
._dash-loading .md-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}
._dash-loading .md-blob.primary { background: var(--md-primary-a200); }
._dash-loading .md-blob.secondary { background: var(--md-secondary-a400); }
._dash-loading .md-blob.amber { background: var(--md-amber-500); }
._dash-loading .md-blob.b1 { width: 220px; height: 220px; top: 8%; left: 10%; }
._dash-loading .md-blob.b2 { width: 280px; height: 280px; bottom: 12%; right: 14%; }
._dash-loading .md-blob.b3 { width: 160px; height: 160px; bottom: 24%; left: 22%; }

/* Keyframes */
@keyframes bgShift {
  /* Mantém as mesmas posições, garantindo que a base sólida já esteja aplicada */
  0%, 100% { background-position: 0% 50%, 0% 50%; }
  50%      { background-position: 100% 50%, 100% 50%; }
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: .82; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-1px); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Acessibilidade: reduz movimento quando preferido */
@media (prefers-reduced-motion: reduce) {
  ._dash-loading { animation: none; }
  ._dash-loading::after { animation: none; }
  ._dash-loading::before { animation: fadeInUp 300ms ease-out both; }
}

/* Alto contraste: fundo sólido e cores de indicador mais intensas */
@media (prefers-contrast: more) {
  ._dash-loading {
    background: #263238; /* Blue Grey 900 */
  }
  ._dash-loading::after {
    border-color: rgba(255,255,255,0.22);
    border-top-color: var(--md-amber-500);
    border-right-color: var(--md-amber-600);
  }
  ._dash-loading::before {
    color: #FFFFFF;
    text-shadow: none;
  }
}