/* Modal - Centered dialog overlay
 * Uses native <dialog> element with backdrop
 * Size variants: sm, md (default), lg, fullscreen
 */

.modal {
  @apply m-0 p-0;
  background: transparent;
  border: none;
  max-width: min(90vw, 32rem); /* 512px default - medium */
  max-height: 90vh;
  overflow: visible;

  /* Let the browser center it naturally, but ensure it's in the middle vertically */
  margin: auto;
}

/* Size variants */
.modal-sm {
  max-width: min(90vw, 24rem); /* 384px - small */
}

.modal-md {
  max-width: min(90vw, 32rem); /* 512px - medium/default */
}

.modal-lg {
  max-width: min(90vw, 48rem); /* 768px - large */
}

.modal-full {
  max-width: 95vw;
  max-height: 95vh;
}

/* Modal backdrop */
.modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
  animation: backdrop-fade-in 0.2s var(--ease-natural);
}

/* Modal card - the actual content container */
.modal-card {
  @apply rounded-lg p-6;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--elevation-modal);
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.modal-card.full {
  @apply rounded-lg;
  max-height: 95vh;
}

/* Close button positioning */
.modal-card > button[data-action*="modal#close"] {
  @apply absolute top-4 right-4;
  @apply p-2 rounded-md;
  @apply transition-colors;
  color: var(--color-text-tertiary);
  z-index: 10;
}

.modal-card > button[data-action*="modal#close"]:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-muted);
}

/* Modal animations */
@keyframes backdrop-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes backdrop-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Smooth entrance */
.modal {
  animation: modal-scale-in 0.2s var(--ease-natural);
}

@keyframes modal-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}