/* Obsidian知识图谱查看器样式 */

:root {
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    --success-color: #10b981;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;
}

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

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

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

/* 按钮样式 */
.btn-primary {
    @apply bg-gradient-to-r from-purple-600 to-purple-700 text-white px-4 py-2 rounded-lg hover:from-purple-700 hover:to-purple-800 transition-all duration-200 flex items-center justify-center;
}

.btn-secondary {
    @apply bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-4 py-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 flex items-center justify-center;
}

/* 模态框样式 */
.modal {
    @apply fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center p-4;
}

.modal.active {
    @apply flex;
}

.modal-content {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full max-h-screen overflow-y-auto;
}

.modal-header {
    @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center;
}

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

.modal-close {
    @apply text-2xl font-bold text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white;
}

/* 节点样式 */
.node-note {
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    background-color: white;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.node-note:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transform: scale(1.05);
    transition: all 0.2s;
}

/* 加载动画 */
.loading {
    @apply flex items-center justify-center py-8;
}

.spinner {
    @apply animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        @apply px-2;
    }
    
    .card-header {
        @apply px-4 py-3;
    }
    
    .card-body {
        @apply p-4;
    }
    
    #graphContainer {
        height: 60vh !important;
    }
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #111827;
    }
}

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-900;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-400 dark:bg-gray-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500 dark:bg-gray-500;
}

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

/* 统计卡片 */
.stat-card {
    @apply bg-gradient-to-r from-purple-600 to-purple-700 text-white p-4 rounded-lg shadow-md;
}

.stat-card .stat-value {
    @apply text-2xl font-bold;
}

.stat-card .stat-label {
    @apply text-sm opacity-90;
}