/* keep your background + colours, flattened (no nesting) */
html {
  color-scheme: light;
}

body {
  background-size: 18px 18px;
  background-position: 0 0;
  background-color: #f7fafc;
  background-image: radial-gradient(rgba(0, 0, 0, 0.30) 1px, transparent 1px);
  color: #1f2937;
}

/* htmx swap transitions for fading content in/out */
.htmx-added {
  opacity: 0;
}

.htmx-settling .htmx-added {
  opacity: 1;
  transition: opacity 300ms ease-in-out;
}

.htmx-swapping {
  opacity: 0;
  transition: opacity 300ms ease-in-out;
}

.purple {
  color: #8a38daff !important;
}

.fade-in.htmx-added {
  opacity: 0;
}

.fade-in {
  opacity: 1;
  transition: opacity .1s ease-out;
}

/* Ensure SweetAlert2 appears above Bulma dropdowns/navbars without using unsupported zIndex option */
.swal2-container { z-index: 10000 !important; }

@media screen and (max-width: 768px) {
  .px-0-mobile { padding-left: 1px !important; padding-right: 1px !important; }
  .mx-0-mobile { margin-left: 1px !important; margin-right: 1px !important; }
}

.has-background-primary-darker{
    background-color: #512065 !important;
}