/**
 * 优化后的CSS样式
 * 减少重复类，提高性能
 */

/* 通用按钮样式 */
.btn {
    @apply px-4 py-2 text-sm font-medium rounded-lg transition-colors duration-200;
}

.btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700;
}

.btn-secondary {
    @apply bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600;
}

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

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

/* 通用输入框样式 */
.input {
    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white;
}

/* 通用卡片样式 */
.card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-md;
}

.card-header {
    @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700;
}

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

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

.table-header {
    @apply bg-gray-50 dark:bg-gray-700;
}

.table-header-cell {
    @apply px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider;
}

.table-body {
    @apply bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700;
}

.table-row {
    @apply hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors duration-150;
}

.table-cell {
    @apply px-4 lg:px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white;
}

/* 通用模态框样式 */
.modal {
    @apply fixed inset-0 bg-black bg-opacity-50 overflow-y-auto h-full w-full hidden z-50;
}

.modal-content {
    @apply relative top-4 sm:top-10 mx-auto p-0 border w-full max-w-md shadow-2xl rounded-xl bg-white dark:bg-gray-800 m-4 sm:m-0;
}

.modal-header {
    @apply flex justify-between items-center mb-4 sm:mb-6;
}

.modal-title {
    @apply text-lg sm:text-xl font-semibold text-gray-900 dark:text-white;
}

.modal-close {
    @apply text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors p-1;
}

/* 通用通知样式 */
.notification {
    @apply fixed top-4 right-4 z-50 px-4 py-3 rounded-lg shadow-lg transition-all duration-300 transform translate-x-full;
}

.notification-success {
    @apply bg-green-500 text-white;
}

.notification-error {
    @apply bg-red-500 text-white;
}

.notification-warning {
    @apply bg-yellow-500 text-white;
}

.notification-info {
    @apply bg-blue-500 text-white;
}

/* 通用图标样式 */
.icon {
    @apply w-5 h-5;
}

.icon-sm {
    @apply w-4 h-4;
}

.icon-lg {
    @apply w-6 h-6;
}

/* 通用间距样式 */
.space-y-optimized > * + * {
    @apply mt-4;
}

.space-x-optimized > * + * {
    @apply ml-4;
}

/* 通用文本样式 */
.text-muted {
    @apply text-gray-500 dark:text-gray-400;
}

.text-primary {
    @apply text-blue-600 dark:text-blue-400;
}

.text-danger {
    @apply text-red-600 dark:text-red-400;
}

.text-success {
    @apply text-green-600 dark:text-green-400;
}

/* 通用背景样式 */
.bg-muted {
    @apply bg-gray-50 dark:bg-gray-700;
}

.bg-primary {
    @apply bg-blue-50 dark:bg-blue-900;
}

/* 通用边框样式 */
.border-muted {
    @apply border-gray-200 dark:border-gray-600;
}

/* 通用阴影样式 */
.shadow-optimized {
    @apply shadow-md hover:shadow-lg transition-shadow duration-200;
}

/* 响应式优化 */
@media (max-width: 768px) {
    .btn {
        @apply w-full;
    }
    
    .modal-content {
        @apply m-2;
    }
    
    .table-cell {
        @apply px-3 py-3;
    }
}

/* 性能优化 */
.will-change-transform {
    will-change: transform;
}

.will-change-opacity {
    will-change: opacity;
}

/* 减少重绘 */
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 硬件加速 */
.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}