/**
 * AstraSchool — Modern Processing Loader, Confirm & Result Modals
 * Unified AstraProcessing Design System
 */

:root {
  --ap-b1: #2A55C8;
  --ap-b2: #2F6BEA;
  --ap-b3: #4F97F8;
  --ap-ink: #0F1F4D;
  --ap-text: #475569;
  --ap-ok: #16A34A;
  --ap-err: #DC2626;
  --ap-acc-1: var(--ap-b1);
  --ap-acc-2: var(--ap-b3);
}

/* ================= LOADER + RESULTADO OVERLAY ================= */
#ap-overlay {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(15, 31, 77, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
#ap-overlay.open { opacity: 1; visibility: visible; }

.ap-card {
  width: 100%; max-width: 350px; min-height: 190px; padding: 30px 28px 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: #ffffff; border-radius: 24px; text-align: center;
  box-shadow: 0 24px 60px rgba(15, 31, 77, .32), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  transform: translateY(12px) scale(.95); transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1), opacity .25s ease;
}
#ap-overlay.open .ap-card { transform: translateY(0) scale(1); }

/* Vistas: loading / confirm / result */
.ap-view { display: none; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
#ap-overlay[data-view="loading"] .ap-view-loading,
#ap-overlay[data-view="confirm"] .ap-view-confirm,
#ap-overlay[data-view="result"]  .ap-view-result { display: flex; animation: ap-in .3s ease; }
@keyframes ap-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* --- A processar (3x3 Pulsing Grid) --- */
.ap-grid { width: 46px; height: 46px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.5px; }
.ap-cell {
  border-radius: 3.5px; background: linear-gradient(135deg, var(--ap-acc-1), var(--ap-acc-2));
  animation: ap-pulse 1.2s ease-in-out infinite; animation-delay: calc(var(--d) * .1s);
  box-shadow: 0 2px 5px rgba(47, 107, 234, 0.25);
}
@keyframes ap-pulse {
  0%   { transform: scale(1); }
  25%  { transform: scale(.18); opacity: 0.35; }
  50%, 100% { transform: scale(1); opacity: 1; }
}
.ap-msg { font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--ap-ink); letter-spacing: -0.01em; }
.ap-msg::after {
  content: ""; display: inline-block; width: 1.2em; text-align: left;
  animation: ap-dots 1.2s steps(4, end) infinite;
}
@keyframes ap-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%, 100% { content: "..."; } }
#ap-overlay[data-tone="danger"] { --ap-acc-1: #B91C1C; --ap-acc-2: #F87171; }

/* --- Resultado (modal simples) --- */
.ap-icon { width: 58px; height: 58px; }
.ap-icon circle { fill: none; stroke-width: 2.6; stroke-dasharray: 126; stroke-dashoffset: 126; animation: ap-draw .5s ease forwards; }
.ap-icon path { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: ap-draw .4s .35s ease forwards; }
@keyframes ap-draw { to { stroke-dashoffset: 0; } }
#ap-overlay[data-state="ok"]  .ap-icon { stroke: var(--ap-ok); }
#ap-overlay[data-state="err"] .ap-icon { stroke: var(--ap-err); }
#ap-overlay[data-state="ok"]  .ap-x,
#ap-overlay[data-state="err"] .ap-check { display: none; }

.ap-title { font-size: 1.15rem; font-weight: 800; color: var(--ap-ink); letter-spacing: -0.02em; }
.ap-text { font-size: .92rem; line-height: 1.5; color: var(--ap-text); margin-top: -6px; }
.ap-btn {
  margin-top: 6px; width: 100%; padding: 12px; border: 0; border-radius: 12px; cursor: pointer;
  font-size: .95rem; font-weight: 700; color: #fff; transition: filter .2s, transform .15s ease;
  font-family: inherit;
}
.ap-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ap-btn:active { transform: translateY(0); }
.ap-btn:focus-visible { outline: 3px solid rgba(79, 151, 248, .5); outline-offset: 2px; }
#ap-overlay[data-state="ok"]  .ap-btn { background: var(--ap-ok); box-shadow: 0 4px 14px rgba(22, 163, 74, .35); }
#ap-overlay[data-state="err"] .ap-btn { background: var(--ap-err); box-shadow: 0 4px 14px rgba(220, 38, 38, .35); }

/* --- Confirmação ("Tem a certeza?") --- */
.ap-qicon {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: #EAF1FE; color: var(--ap-b2);
}
.ap-qicon svg { width: 30px; height: 30px; }
.ap-qicon path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ap-qicon .q-warn { display: none; }
#ap-overlay[data-tone="danger"] .ap-qicon { background: #FDECEC; color: var(--ap-err); }
#ap-overlay[data-tone="danger"] .ap-qicon .q-ask  { display: none; }
#ap-overlay[data-tone="danger"] .ap-qicon .q-warn { display: inline; }

.ap-actions { display: flex; gap: 10px; width: 100%; margin-top: 6px; }
.ap-actions .ap-btn { margin-top: 0; flex: 1; }
.ap-btn.ghost { color: var(--ap-text); background: #fff; border: 1.5px solid #E2E8F0; }
.ap-btn.ghost:hover { background: #F1F5F9; filter: none; border-color: #CBD5E1; }
.ap-btn.yes { background: var(--ap-b2); box-shadow: 0 4px 14px rgba(47, 107, 234, .35); }
#ap-overlay[data-tone="danger"] .ap-btn.yes { background: var(--ap-err); box-shadow: 0 4px 14px rgba(220, 38, 38, .35); }

.ap-brand { font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: #94A3B8; font-weight: 600; margin-top: 4px; }
.ap-brand b { color: var(--ap-b2); font-weight: 800; }

@media (prefers-reduced-motion: reduce) { .ap-cell { animation-duration: 3s; } }

/* ================= CUSTOMIZACÃO GERAL DE SPINNERS ================= */
/* Moderniza todos os spinners do Bootstrap no sistema para a paleta AstraSchool */
.spinner-border {
  border: 2.5px solid rgba(47, 107, 234, 0.16) !important;
  border-top-color: var(--ap-b2, #2F6BEA) !important;
  animation: astraSpinnerRotate 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}
.spinner-border-sm {
  width: 1rem !important;
  height: 1rem !important;
  border-width: 2px !important;
}
.spinner-grow {
  background: linear-gradient(135deg, var(--ap-b1), var(--ap-b3)) !important;
  animation: astraSpinnerGrow 0.9s ease-in-out infinite !important;
}
@keyframes astraSpinnerRotate {
  to { transform: rotate(360deg); }
}
@keyframes astraSpinnerGrow {
  0% { transform: scale(0); opacity: 0; }
  50% { opacity: 0.85; }
  100% { transform: scale(1); opacity: 0; }
}

/* Inline 3x3 Astra Grid para botões ou mini-loaders */
.ap-inline-grid {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5px;
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.ap-inline-grid .ap-cell {
  border-radius: 2px;
  background: linear-gradient(135deg, var(--ap-acc-1), var(--ap-acc-2));
  animation: ap-pulse 1.2s ease-in-out infinite;
  animation-delay: calc(var(--d) * .1s);
}