/* Small custom layer on top of Tailwind CDN. */
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Moving galaxy background: layered nebula + drifting starfield (CSS only). */
.galaxy {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.galaxy::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(ellipse 60% 45% at 20% 15%, rgba(59, 130, 246, 0.16), transparent 60%),
    radial-gradient(ellipse 55% 40% at 80% 20%, rgba(99, 102, 241, 0.14), transparent 65%),
    radial-gradient(ellipse 65% 50% at 50% 90%, rgba(30, 58, 138, 0.18), transparent 70%);
  animation: galaxy-drift 60s linear infinite alternate;
}
.galaxy::after {
  content: "";
  position: absolute;
  inset: -30%;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255, 255, 255, 0.9), transparent 100%),
    radial-gradient(1px 1px at 28% 64%, rgba(147, 197, 253, 0.8), transparent 100%),
    radial-gradient(1.5px 1.5px at 43% 12%, rgba(255, 255, 255, 0.7), transparent 100%),
    radial-gradient(1px 1px at 57% 47%, rgba(147, 197, 253, 0.9), transparent 100%),
    radial-gradient(1.5px 1.5px at 69% 78%, rgba(255, 255, 255, 0.8), transparent 100%),
    radial-gradient(1px 1px at 84% 30%, rgba(165, 180, 252, 0.9), transparent 100%),
    radial-gradient(1px 1px at 91% 62%, rgba(255, 255, 255, 0.7), transparent 100%),
    radial-gradient(1.5px 1.5px at 8% 82%, rgba(147, 197, 253, 0.8), transparent 100%);
  animation: stars-drift 120s linear infinite, stars-twinkle 6s ease-in-out infinite alternate;
}
@keyframes galaxy-drift {
  from { transform: translate3d(-2%, -1%, 0) rotate(0deg) scale(1); }
  to   { transform: translate3d(2%, 2%, 0) rotate(2deg) scale(1.05); }
}
@keyframes stars-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-4%, 3%, 0); }
}
@keyframes stars-twinkle {
  from { opacity: 0.75; }
  to   { opacity: 1; }
}
/* Softer in light mode */
:root:not(.dark) .galaxy::before { opacity: 0.5; }
:root:not(.dark) .galaxy::after { opacity: 0.5; }

/* Simple spinner */
.spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: #3b82f6;
  border-radius: 9999px;
  animation: spin 0.9s linear infinite;
  margin: 0 auto;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Cards */
.card {
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

/* Tables */
.table-base {
  width: 100%;
  font-size: 0.875rem;
  text-align: left;
}
.table-base th {
  padding: 0.625rem 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.table-base td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Chat bubbles */
.chat-msg { max-width: 80%; }
.chat-msg.customer { margin-left: auto; background: #d97706; color: #111; }
.chat-msg.staff { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* Hide number input spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }