/* Kidsplace admin — motion, focus, loading */

.admin-ui-fade-in {
  animation: adminUiFadeIn 0.45s ease-out both;
}

.admin-ui-fade-in-delay-1 {
  animation: adminUiFadeIn 0.5s ease-out 0.08s both;
}

/* Opacity only — no transform on page wrappers (transform breaks Bootstrap modal/backdrop stacking). */
@keyframes adminUiFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.admin-ui-card-hover {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.admin-ui-card-hover:hover {
  box-shadow: 0 0.5rem 1.25rem rgba(78, 115, 223, 0.18) !important;
  transform: translateY(-2px);
}

/*
 * Full-page busy overlay — must sit ABOVE Bootstrap .modal (1050) when active,
 * but hidden overlays must not capture clicks (pointer-events: none).
 * Bootstrap 4: .modal-backdrop z-index 1040, .modal z-index 1050.
 */
#admin-ui-global-overlay.admin-ui-overlay {
  position: fixed;
  inset: 0;
  /* Above modal (1050) when saving; inactive stays non-interactive */
  z-index: 1080;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(248, 249, 252, 0.94);
  pointer-events: none;
}

/* Visible loading state — toggled only via JS */
#admin-ui-global-overlay.admin-ui-overlay.is-active {
  display: flex !important;
  pointer-events: auto !important;
}

#admin-ui-global-overlay .spinner-border {
  width: 2.75rem;
  height: 2.75rem;
}

.admin-ui-overlay-msg {
  max-width: 320px;
  text-align: center;
  font-size: 0.95rem;
  color: #5a5c69;
  margin-top: 1rem !important;
}

/* Button loading state */
.btn-admin-loading {
  pointer-events: none;
  opacity: 0.92;
  position: relative;
}

.btn-admin-loading .admin-ui-btn-label {
  opacity: 0.85;
}

/* Toasts above modals and above loading overlay */
#admin-ui-toast-stack {
  position: fixed;
  top: 5.5rem;
  right: 1.25rem;
  z-index: 1090;
  max-width: 380px;
  pointer-events: none;
}

#admin-ui-toast-stack .alert {
  pointer-events: auto;
  animation: adminUiToastIn 0.35s ease-out both;
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.1);
}

@keyframes adminUiToastIn {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Page heading */
.admin-ui-page-title {
  letter-spacing: -0.02em;
}

/* Table row subtle stagger */
.admin-ui-table tbody tr {
  animation: adminUiFadeIn 0.35s ease-out both;
}

.admin-ui-table tbody tr:nth-child(1) {
  animation-delay: 0.02s;
}
.admin-ui-table tbody tr:nth-child(2) {
  animation-delay: 0.04s;
}
.admin-ui-table tbody tr:nth-child(3) {
  animation-delay: 0.06s;
}
.admin-ui-table tbody tr:nth-child(4) {
  animation-delay: 0.08s;
}
.admin-ui-table tbody tr:nth-child(5) {
  animation-delay: 0.1s;
}

/* Modals should be appended to <body> (see JS). Backdrop must sit under .modal. */
body > .modal {
  z-index: 1050;
}

body > .modal-backdrop {
  z-index: 1040;
}

.modal.fade .modal-dialog {
  transition: transform 0.25s ease-out, opacity 0.25s ease;
}

.modal.show .modal-dialog {
  transform: none;
}