/* 自定義樣式 - Tailwind CSS 兼容 */

/* 表格行 hover 效果 */
.table-row:hover {
    @apply bg-blue-50;
}

/* 搜索高亮 */
.search-highlight {
    @apply bg-yellow-200 px-1 py-0.5 rounded;
}

/* 載入狀態 */
.loading-state {
    @apply text-center py-8 text-gray-500;
}

/* 空狀態 */
.empty-state {
    @apply text-center py-12 text-gray-500;
}

.empty-state i {
    @apply text-5xl mb-4 opacity-50;
}

/* Modal 動畫 */
.modal-enter {
    @apply opacity-0 scale-95;
}

.modal-enter-active {
    @apply opacity-100 scale-100 transition-all duration-200 ease-out;
}

.modal-leave {
    @apply opacity-100 scale-100;
}

.modal-leave-active {
    @apply opacity-0 scale-95 transition-all duration-200 ease-in;
}

/* 自定義滾動條 */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-gray-100 rounded-full;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400;
}

/* 響應式表格 */
@media (max-width: 640px) {
    .responsive-table {
        font-size: 0.875rem;
    }
    
    .responsive-table th,
    .responsive-table td {
        @apply px-3 py-2;
    }
}

/* 按鈕組樣式 */
.btn-group {
    @apply flex space-x-1;
}

/* 分頁按鈕樣式 */
.pagination-btn {
    @apply px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 hover:text-gray-700 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500;
}

.pagination-btn.active {
    @apply bg-blue-50 border-blue-500 text-blue-600;
}

.pagination-btn:disabled {
    @apply opacity-50 cursor-not-allowed hover:bg-white hover:text-gray-500;
}