:root {
  --smartpos-engine-layer: 2147483000;
  --smartpos-engine-primary: #2563eb;
}

html[data-smartpos-booting="true"] {
  cursor: progress;
}

html[data-smartpos-booting="true"]::before {
  position: fixed;
  inset: 0;
  z-index: var(--smartpos-engine-layer);
  content: "";
  background:
    radial-gradient(
      circle at center,
      rgba(219, 234, 254, 0.8),
      transparent 280px
    ),
    rgba(248, 250, 252, 0.98);
}

html[data-smartpos-booting="true"]::after {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: calc(var(--smartpos-engine-layer) + 1);
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  content: "";
  border: 5px solid rgba(37, 99, 235, 0.18);
  border-top-color: var(--smartpos-engine-primary);
  border-radius: 50%;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
  animation: smartpos-engine-spin 0.78s linear infinite;
}

html[data-smartpos-recovering="true"] *,
html[data-smartpos-recovering="true"] *::before,
html[data-smartpos-recovering="true"] *::after {
  transition-duration: 0.01ms !important;
}

.smartpos-developer-errors {
  margin-top: 24px;
  border: 1px solid rgba(37, 99, 235, 0.22);
}

.smartpos-developer-error-header,
.smartpos-developer-error-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.smartpos-developer-error-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.smartpos-developer-error-table-wrap {
  max-height: 520px;
  margin-top: 16px;
  overflow: auto;
}

.smartpos-developer-error-table-wrap table {
  width: 100%;
  min-width: 1050px;
}

.smartpos-developer-error-table-wrap td {
  max-width: 360px;
  overflow-wrap: anywhere;
  vertical-align: top;
}

@media (max-width: 760px) {
  .smartpos-developer-error-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-smartpos-booting="true"]::after {
    animation-duration: 1.8s;
  }
}

@keyframes smartpos-engine-spin {
  to {
    transform: rotate(360deg);
  }
}
