@layer components {
    /* Modal */
    .amc-modal {
        @apply fixed inset-0 z-[100] hidden;
    }

    .amc-modal.amc-show {
        @apply flex items-center justify-center;
    }

    .amc-modal__dialog {
        @apply w-full max-w-lg mx-4;
    }

    .amc-modal__content {
        @apply w-full bg-white rounded-2xl shadow-xl ring-1 ring-black/5;
    }

    .amc-modal__header {
        @apply flex items-center justify-between border-b border-gray-200 px-5 py-4;
    }

    .amc-modal__title {
        @apply text-lg font-semibold;
    }

    .amc-modal__body {
        @apply p-5;
    }

    /* Buttons */
    .amc-btn {
        @apply inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition;
    }

    .amc-btn--primary {
        @apply bg-indigo-600 text-white hover:bg-indigo-700 active:bg-indigo-800;
    }

    .amc-btn-close {
        @apply inline-flex items-center justify-center w-8 h-8 rounded-full hover:bg-gray-100;
    }

    .amc-btn-close::before {
        content: "✕";
        @apply text-gray-500;
    }

    /* Form controls */
    .amc-input {
        @apply w-full rounded-md border border-gray-300 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500;
    }

    .amc-select {
        @apply w-full rounded-md border border-gray-300 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500 bg-white;
    }

    .amc-textarea {
        @apply w-full rounded-md border border-gray-300 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500;
    }

    /* Layout helpers */
    .amc-grid {
        @apply grid;
    }

    .amc-gap-sm {
        @apply gap-3;
    }

    /* Text */
    .amc-text-xs {
        @apply text-xs;
    }

    .amc-text-muted {
        @apply text-gray-500;
    }
}

/* Fade/slide animation */
.amc-modal .amc-modal__content {
    @apply opacity-0 translate-y-3 transition duration-200 ease-out;
}

.amc-modal.amc-show .amc-modal__content {
    @apply opacity-100 translate-y-0;
}

/* Backdrop */
.amc-backdrop {
    @apply fixed inset-0 bg-black/50 opacity-0 transition duration-200 ease-out;
}

.amc-backdrop.amc-show {
    @apply opacity-100;
}

/* Scroll lock */
.amc-modal-open {
    overflow: hidden;
}