/*
 * ===================================================================
 * === Base Component Styles (using @apply)
 * === (สร้างไฟล์นี้ แล้ว import เข้าไปใน CSS หลัก)
 * ===================================================================
 */

/* === Form Elements === */
.form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
}

.form-input {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm 
           placeholder-gray-400 
           focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 
           sm:text-sm transition-shadow;
}

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

.form-radio {
    @apply h-4 w-4 text-indigo-600 border-gray-300 
           focus:ring-indigo-500;
}

.form-group {
    @apply mb-4;
}

/* === Buttons === */
.btn {
    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent 
           rounded-lg shadow-sm font-medium 
           text-sm 
           focus:outline-none focus:ring-2 focus:ring-offset-2 
           transition-all duration-150 ease-in-out;
}

.btn-primary {
    @apply bg-indigo-600 text-white 
           hover:bg-indigo-700 
           focus:ring-indigo-500;
}

.btn-secondary {
    @apply bg-gray-200 text-gray-800 
           hover:bg-gray-300 
           focus:ring-gray-400;
}

.btn-danger {
    @apply bg-red-600 text-white 
           hover:bg-red-700 
           focus:ring-red-500;
}

/* === Outline Buttons (สำหรับ Modal Detail) === */
.btn-primary-outline {
    @apply bg-white text-indigo-600 border border-indigo-500 
           hover:bg-indigo-50 
           focus:ring-indigo-500;
}

.btn-secondary-outline {
    @apply bg-white text-gray-700 border border-gray-300 
           hover:bg-gray-50 
           focus:ring-indigo-500;
}

/* === Button Sizes === */
.btn-sm {
    @apply px-3 py-1.5 text-xs;
}

.btn-lg {
    @apply px-6 py-3 text-base;
}

/* === Modal Structure === */
.modal-header {
    @apply px-6 py-4 flex justify-between items-center border-b flex-shrink-0;
}

.modal-body {
    @apply p-6 overflow-y-auto flex-grow;
}

.close-modal-btn {
    @apply text-gray-500 text-2xl font-bold 
           hover:text-gray-800 transition;
}