/* 自定义样式 */

/* 拖拽区域样式 */
.drag-over {
    @apply border-blue-400 bg-blue-50;
}

/* 文件项样式 */
.file-item {
    @apply flex items-center justify-between p-3 bg-gray-50 rounded-lg;
}

.file-item .file-info {
    @apply flex items-center space-x-3;
}

.file-item .file-name {
    @apply font-medium text-gray-900;
}

.file-item .file-size {
    @apply text-sm text-gray-500;
}

.file-item .file-type {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.file-type.gpx {
    @apply bg-green-100 text-green-800;
}

.file-type.kml {
    @apply bg-blue-100 text-blue-800;
}

/* 坡度段样式 */
.slope-segment {
    @apply flex items-center justify-between p-3 border border-gray-200 rounded-lg;
}

.slope-segment.uphill {
    @apply bg-green-50 border-green-200;
}

.slope-segment.downhill {
    @apply bg-red-50 border-red-200;
}

.slope-segment .segment-info {
    @apply flex-1;
}

.slope-segment .segment-label {
    @apply font-medium text-gray-900;
}

.slope-segment .segment-details {
    @apply text-sm text-gray-600;
}

.slope-segment .segment-stats {
    @apply text-right;
}

.slope-segment .stat-value {
    @apply font-bold;
}

.slope-segment.uphill .stat-value {
    @apply text-green-700;
}

.slope-segment.downhill .stat-value {
    @apply text-red-700;
}

/* 表格样式 */
.data-table {
    max-height: 400px;
    overflow-y: auto;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .chart-container {
        padding: 1rem;
    }
    
    .data-table {
        font-size: 0.875rem;
    }
}

/* 动画效果 */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Chart.js 自定义样式 */
.chart-container {
    position: relative;
    height: 400px;
}

/* 提示框样式 */
.tooltip {
    @apply absolute z-10 px-3 py-2 text-sm text-white bg-gray-900 rounded-md shadow-lg;
}

/* 按钮悬停效果 */
.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md font-medium transition-colors;
}

.btn-secondary {
    @apply bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md font-medium transition-colors;
}

/* 状态指示器 */
.status-indicator {
    @apply inline-block w-3 h-3 rounded-full mr-2;
}

.status-indicator.success {
    @apply bg-green-400;
}

.status-indicator.error {
    @apply bg-red-400;
}

.status-indicator.processing {
    @apply bg-yellow-400;
}

/* 加载动画 */
.loading-spinner {
    @apply animate-spin rounded-full border-2 border-gray-300 border-t-blue-600;
}

/* 进度条 */
.progress-bar {
    @apply w-full bg-gray-200 rounded-full h-2;
}

.progress-bar-fill {
    @apply h-2 bg-blue-600 rounded-full transition-all duration-300;
}

/* 错误状态样式 */
.error-message {
    @apply bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md;
}

.warning-message {
    @apply bg-yellow-50 border border-yellow-200 text-yellow-700 px-4 py-3 rounded-md;
}

.info-message {
    @apply bg-blue-50 border border-blue-200 text-blue-700 px-4 py-3 rounded-md;
}

/* 图表工具提示自定义样式 */
.chartjs-tooltip {
    @apply bg-gray-800 text-white p-2 rounded-md text-sm;
}

/* 数据高亮样式 */
.highlight {
    @apply bg-yellow-100 border-yellow-300;
}

/* 分段颜色 */
.elevation-gain {
    color: #10b981; /* green-500 */
}

.elevation-loss {
    color: #ef4444; /* red-500 */
}

.elevation-flat {
    color: #6b7280; /* gray-500 */
}

/* 统计卡片阴影 */
.stat-card {
    @apply transition-shadow duration-200;
}

.stat-card:hover {
    @apply shadow-lg;
}