/* 自定义样式 */
.tab-btn {
    @apply px-4 py-2 text-sm font-medium text-gray-600 border-b-2 border-transparent hover:text-blue-600 hover:border-blue-300 transition-colors duration-200;
}

.tab-btn.active {
    @apply text-blue-600 border-blue-500;
}

.tab-content {
    @apply transition-opacity duration-200;
}

/* 星级评分样式 */
.star-rating {
    @apply flex items-center space-x-1;
}

.star {
    @apply w-8 h-8 cursor-pointer transition-colors duration-150;
    color: #d1d5db;
}

.star.active {
    color: #fbbf24;
}

.star:hover {
    color: #f59e0b;
}

/* 症状卡片样式 */
.symptom-card {
    @apply bg-gray-50 rounded-lg p-4 border border-gray-200 hover:border-gray-300 transition-colors duration-200;
}

.symptom-card.has-score {
    @apply bg-blue-50 border-blue-200;
}

/* 病程记录时间线样式 */
.timeline-item {
    @apply relative pl-8 pb-6;
}

.timeline-item::before {
    content: '';
    @apply absolute left-0 top-2 w-3 h-3 bg-blue-500 rounded-full;
}

.timeline-item::after {
    content: '';
    @apply absolute left-1.5 top-5 w-0.5 bg-gray-300;
    height: calc(100% - 12px);
}

.timeline-item:last-child::after {
    display: none;
}

/* 症状过滤器样式 */
.symptom-filter {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium cursor-pointer transition-colors duration-200;
    background-color: #f3f4f6;
    color: #6b7280;
}

.symptom-filter.active {
    @apply bg-blue-500 text-white;
}

.symptom-filter:hover:not(.active) {
    @apply bg-gray-300;
}

/* 最近用户按钮样式 */
.recent-user-btn {
    @apply w-full text-left px-3 py-2 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors duration-200 text-sm;
}

/* 响应式设计 */
@media (max-width: 640px) {
    .tab-btn {
        @apply text-xs px-2 py-1;
    }

    .star {
        @apply w-6 h-6;
    }

    .symptom-card {
        @apply p-3;
    }
}

/* 加载动画 */
.loading {
    @apply animate-pulse;
}

/* 通知动画 */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.notification-enter {
    animation: slideInRight 0.3s ease-out;
}

.notification-exit {
    animation: slideOutRight 0.3s ease-in;
}

/* 模态框动画 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-enter {
    animation: fadeIn 0.2s ease-out;
}

.modal-enter .modal-content {
    animation: scaleIn 0.2s ease-out;
}

/* 深色模式支持（预留） */
@media (prefers-color-scheme: dark) {
    /* 暂时不实现，为未来扩展预留 */
}

/* 高对比度模式（适合中老年用户） */
.high-contrast {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
}

.high-contrast .bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    border: 2px solid #000;
}

/* 大字体模式 */
.large-font {
    font-size: 1.25rem;
}

.large-font .text-sm {
    font-size: 1rem;
}

.large-font .text-lg {
    font-size: 1.5rem;
}

.large-font .text-xl {
    font-size: 1.75rem;
}

.large-font .text-2xl {
    font-size: 2.25rem;
}

/* 打印样式 */
@media print {
    .no-print {
        display: none !important;
    }

    body {
        background: white !important;
    }

    .bg-gradient-to-br {
        background: white !important;
    }
}