/*
 * GALAPPXY — Modals & Loaders & Toasts
 */

/* ─── MODAL ──────────────────────────────────────────────── */
.gx-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--gx-bg-overlay);
  z-index: var(--gx-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gx-sp-4);
  opacity: 0;
  visibility: hidden;
  transition: all var(--gx-duration-base) var(--gx-ease-default);
}

.gx-modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.gx-modal {
  position: relative; /* Required: containing block for loading/error overlays */
  background: var(--gx-bg-surface);
  border-radius: var(--gx-radius-xl);
  box-shadow: var(--gx-shadow-float);
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  transform: translateY(20px) scale(0.96);
  transition: transform var(--gx-duration-medium) var(--gx-ease-bounce);
  overflow: hidden;
}

.gx-modal-backdrop.is-open .gx-modal {
  transform: translateY(0) scale(1);
}

.gx-modal--sm { max-width: 400px; }
.gx-modal--m  { max-width: 550px; }
.gx-modal--lg { max-width: 680px; }
.gx-modal--xl { max-width: 900px; }

.gx-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gx-sp-4) var(--gx-sp-5);
  border-bottom: 1px solid var(--gx-border-light);
  flex-shrink: 0;
}

.gx-modal__title {
  font-size: var(--gx-text-lg);
  font-weight: var(--gx-weight-semibold);
}

.gx-modal__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--gx-radius-md);
  border: none;
  background: none;
  color: var(--gx-text-muted);
  cursor: pointer;
  transition: all var(--gx-duration-fast) var(--gx-ease-default);
}

.gx-modal__close:hover {
  background: var(--gx-bg-surface-alt);
  color: var(--gx-text-primary);
}

.gx-modal__body {
  padding: var(--gx-sp-5);
  overflow-y: auto;
  flex-grow: 1;
}

.gx-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gx-sp-3);
  padding: var(--gx-sp-4) var(--gx-sp-5);
  border-top: 1px solid var(--gx-border-light);
  flex-shrink: 0;
}


/* ─── LOADERS ────────────────────────────────────────────── */

/* Spinner */
.gx-spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--gx-border-color);
  border-top-color: var(--gx-primary);
  border-radius: 50%;
  animation: gx-spin 0.7s linear infinite;
}

.gx-spinner--sm { width: 16px; height: 16px; border-width: 2px; }
.gx-spinner--lg { width: 36px; height: 36px; border-width: 3px; }
.gx-spinner--xl { width: 48px; height: 48px; border-width: 3.5px; }

.gx-spinner--light {
  border-color: rgba(255, 255, 255, 0.2);
  border-top-color: #FFFFFF;
}

/* Progress bar */
.gx-progress {
  width: 100%;
  height: 6px;
  background: var(--gx-bg-surface-alt);
  border-radius: var(--gx-radius-full);
  overflow: hidden;
}

.gx-progress__bar {
  height: 100%;
  background: var(--gx-primary);
  border-radius: var(--gx-radius-full);
  transition: width var(--gx-duration-slow) var(--gx-ease-default);
}

.gx-progress__bar--success { background: var(--gx-success); }
.gx-progress__bar--danger  { background: var(--gx-danger); }

/* Indeterminate progress */
.gx-progress--indeterminate .gx-progress__bar {
  width: 30% !important;
  animation: gx-indeterminate 1.5s ease-in-out infinite;
}

@keyframes gx-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* Skeleton loader */
.gx-skeleton {
  background: linear-gradient(
    90deg,
    var(--gx-bg-surface-alt) 25%,
    var(--gx-bg-surface-hover) 50%,
    var(--gx-bg-surface-alt) 75%
  );
  background-size: 200% 100%;
  animation: gx-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--gx-radius-sm);
}

.gx-skeleton--text { height: 14px; margin-bottom: var(--gx-sp-2); }
.gx-skeleton--title { height: 20px; width: 60%; margin-bottom: var(--gx-sp-3); }
.gx-skeleton--circle { border-radius: 50%; }
.gx-skeleton--card { height: 120px; border-radius: var(--gx-card-radius); }

@keyframes gx-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Full page loader */
.gx-page-loader {
  position: fixed;
  inset: 0;
  z-index: var(--gx-z-loader);
  background: var(--gx-bg-body);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gx-sp-4);
  transition: opacity var(--gx-duration-slow) var(--gx-ease-out);
}

.gx-page-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}


/* ─── TOASTS ─────────────────────────────────────────────── */
.gx-toast-container {
  position: fixed;
  bottom: var(--gx-sp-6);
  right: var(--gx-sp-6);
  z-index: var(--gx-z-toast);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--gx-sp-3);
}

.gx-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--gx-sp-3);
  padding: var(--gx-sp-3) var(--gx-sp-4);
  background: var(--gx-bg-elevated);
  border: 1px solid var(--gx-border-light);
  border-radius: var(--gx-radius-lg);
  box-shadow: var(--gx-shadow-lg);
  min-width: 300px;
  max-width: 420px;
  animation: gx-slide-in 0.3s var(--gx-ease-bounce);
}

.gx-toast--success { border-left: 3px solid var(--gx-success); }
.gx-toast--danger  { border-left: 3px solid var(--gx-danger); }
.gx-toast--warning { border-left: 3px solid var(--gx-warning); }
.gx-toast--info    { border-left: 3px solid var(--gx-info); }

.gx-toast__icon { font-size: 18px; margin-top: 1px; flex-shrink: 0; }
.gx-toast--success .gx-toast__icon { color: var(--gx-success); }
.gx-toast--danger  .gx-toast__icon { color: var(--gx-danger); }

.gx-toast__body { flex-grow: 1; }

.gx-toast__title {
  font-size: var(--gx-text-sm);
  font-weight: var(--gx-weight-semibold);
  color: var(--gx-text-primary);
}

.gx-toast__message {
  font-size: var(--gx-text-xs);
  color: var(--gx-text-secondary);
  margin-top: 2px;
}

.gx-toast__close {
  border: none;
  background: none;
  color: var(--gx-text-muted);
  cursor: pointer;
  padding: 2px;
  font-size: 16px;
}

@keyframes gx-slide-in {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}