/* 公共样式 */
.btn {
    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition duration-200;
}

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

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

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

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

.btn-warning {
    @apply bg-yellow-500 hover:bg-yellow-600 text-white focus:ring-yellow-500;
}

.btn-sm {
    @apply px-3 py-1.5 text-xs;
}

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

.btn-icon {
    @apply p-2;
}

/* 卡片组件 */
.card {
    @apply bg-white rounded-lg shadow-sm transition-all duration-200;
}

.card:hover {
    @apply shadow-md;
}

.card-header {
    @apply p-4 border-b border-gray-100;
}

.card-body {
    @apply p-4;
}

.card-footer {
    @apply p-4 bg-gray-50 border-t border-gray-100;
}

/* 表格样式 */
.table {
    @apply min-w-full divide-y divide-gray-200;
}

.table th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-500;
}

.table tr {
    @apply border-b border-gray-100;
}

.table-hover tr:hover {
    @apply bg-gray-50;
}

/* 表单样式 */
.form-control {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
}

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

.form-help {
    @apply mt-1 text-xs text-gray-500;
}

.form-error {
    @apply mt-1 text-xs text-red-600;
}

/* 标签样式 */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-success {
    @apply bg-green-100 text-green-800;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-danger {
    @apply bg-red-100 text-red-800;
}

.badge-info {
    @apply bg-blue-100 text-blue-800;
}

.badge-default {
    @apply bg-gray-100 text-gray-800;
}

/* 动画 */
@keyframes pulse-ring {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }
    70%, 100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.animate-pulse-ring:before {
    content: '';
    @apply absolute rounded-full bg-current w-full h-full;
    z-index: -1;
    animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

/* 响应式实用工具 */
.responsive-grid {
    @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6;
}

/* 聊天气泡 */
.chat-bubble {
    @apply max-w-[70%] p-3 rounded-lg;
}

.chat-bubble-outgoing {
    @apply bg-indigo-100 rounded-tl-lg rounded-tr-lg rounded-bl-lg ml-auto;
}

.chat-bubble-incoming {
    @apply bg-gray-100 rounded-tl-lg rounded-tr-lg rounded-br-lg;
}

/* 高级导航 */
.nav-tabs {
    @apply flex border-b border-gray-200;
}

.nav-tab {
    @apply py-2 px-4 text-center border-b-2 font-medium text-sm;
}

.nav-tab-active {
    @apply border-indigo-500 text-indigo-600;
}

.nav-tab-inactive {
    @apply border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300;
}