/* ========================================
   Material Design 3 Custom Styles
   Modern Blue Theme - Verdure MCP Platform
   ======================================== */

/* ==========================================================================
   M3 Design Tokens
   ========================================================================== */
:root {
    /* M3 Color Tokens - 蓝色主题 */
    --m3-primary: #1976D2;
    --m3-primary-light: #BBDEFB;
    --m3-primary-dark: #1565C0;
    --m3-on-primary: #FFFFFF;
    
    --m3-secondary: #0097A7;
    --m3-secondary-light: #B2EBF2;
    --m3-secondary-dark: #00838F;
    --m3-on-secondary: #FFFFFF;
    
    --m3-success: #2E7D32;
    --m3-warning: #F57C00;
    --m3-error: #D32F2F;
    --m3-info: #0288D1;
    
    --m3-surface: #FFFFFF;
    --m3-background: #FAFAFA;
    --m3-on-surface: #212121;
    
    /* M3 间距系统 (Spacing Scale) */
    --m3-spacing-xs: 4px;
    --m3-spacing-sm: 8px;
    --m3-spacing-md: 12px;
    --m3-spacing-lg: 16px;
    --m3-spacing-xl: 24px;
    --m3-spacing-2xl: 32px;
    --m3-spacing-3xl: 48px;
    --m3-spacing-4xl: 64px;
    
    /* M3 形状系统 (Shape Scale) */
    --m3-shape-none: 0;
    --m3-shape-xs: 4px;
    --m3-shape-sm: 8px;
    --m3-shape-md: 12px;
    --m3-shape-lg: 16px;
    --m3-shape-xl: 28px;
    --m3-shape-full: 9999px;
    
    /* M3 动画系统 */
    --m3-duration-short: 200ms;
    --m3-duration-medium: 300ms;
    --m3-duration-long: 500ms;
    --m3-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --m3-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --m3-easing-decelerated: cubic-bezier(0.0, 0, 0.2, 1);
    --m3-easing-accelerated: cubic-bezier(0.4, 0, 1, 1);
}

/* ==========================================================================
   M3 容器系统 (Container System)
   ========================================================================== */
.m3-container-compact {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--m3-spacing-lg);
}

.m3-container-medium {
    max-width: 840px;
    margin: 0 auto;
    padding: var(--m3-spacing-xl);
}

.m3-container-expanded {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--m3-spacing-xl);
}

.m3-container-full {
    width: 100%;
    padding: var(--m3-spacing-xl);
}

/* ==========================================================================
   M3 表面层级系统 (Surface Elevation)
   ========================================================================== */
.m3-surface-0 {
    background-color: var(--mud-palette-surface);
    box-shadow: none;
}

.m3-surface-1 {
    background-color: var(--mud-palette-surface);
    box-shadow: 0px 1px 2px rgba(0,0,0,0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
}

.m3-surface-2 {
    background-color: var(--mud-palette-surface);
    box-shadow: 0px 1px 2px rgba(0,0,0,0.3), 0px 2px 6px 2px rgba(0,0,0,0.15);
}

.m3-surface-3 {
    background-color: var(--mud-palette-surface);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.3), 0px 4px 8px 3px rgba(0,0,0,0.15);
}

.m3-surface-4 {
    background-color: var(--mud-palette-surface);
    box-shadow: 0px 2px 3px rgba(0,0,0,0.3), 0px 6px 10px 4px rgba(0,0,0,0.15);
}

.m3-surface-5 {
    background-color: var(--mud-palette-surface);
    box-shadow: 0px 4px 4px rgba(0,0,0,0.3), 0px 8px 12px 6px rgba(0,0,0,0.15);
}

/* ==========================================================================
   M3 卡片样式 (Card Styles)
   ========================================================================== */
.m3-card {
    border-radius: var(--m3-shape-md);
    padding: var(--m3-spacing-lg);
    background-color: var(--mud-palette-surface);
    transition: box-shadow var(--m3-duration-medium) var(--m3-easing-standard);
}

.m3-card-elevated {
    box-shadow: 0px 1px 2px rgba(0,0,0,0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
}

.m3-card-elevated:hover {
    box-shadow: 0px 2px 3px rgba(0,0,0,0.3), 0px 6px 10px 4px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.m3-card-filled {
    background-color: var(--mud-palette-surface-variant);
    box-shadow: none;
}

.m3-card-outlined {
    border: 1px solid var(--mud-palette-divider);
    box-shadow: none;
}

/* Connection Card Specific Styles */
.connection-card {
    position: relative;
    overflow: hidden;
    background: #FFFFFF;
}

.connection-card:hover {
    box-shadow: 0px 4px 8px rgba(0,0,0,0.12), 0px 2px 4px rgba(0,0,0,0.08) !important;
}

.connection-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1976D2 0%, #0097A7 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.connection-card:hover::before {
    transform: scaleX(1);
}

/* ==========================================================================
   M3 按钮样式 (Button Styles)
   ========================================================================== */
.m3-button {
    border-radius: var(--m3-shape-xl) !important;
    padding: 10px 24px !important;
    text-transform: none !important;
    font-weight: 500 !important;
    transition: all var(--m3-duration-short) var(--m3-easing-standard) !important;
}

.m3-button-lg {
    border-radius: var(--m3-shape-xl) !important;
    padding: 14px 32px !important;
    font-size: 1rem !important;
}

.m3-button-sm {
    border-radius: var(--m3-shape-lg) !important;
    padding: 8px 16px !important;
    font-size: 0.875rem !important;
}

/* M3 图标按钮 */
.m3-icon-button {
    border-radius: var(--m3-shape-full) !important;
    transition: all var(--m3-duration-short) var(--m3-easing-standard) !important;
}

/* ==========================================================================
   M3 Chip 样式
   ========================================================================== */
.m3-chip {
    border-radius: var(--m3-shape-sm) !important;
    font-weight: 500 !important;
    transition: all var(--m3-duration-short) var(--m3-easing-standard) !important;
}

/* ==========================================================================
   M3 间距工具类 (Spacing Utilities)
   ========================================================================== */
.m3-gap-xs { gap: var(--m3-spacing-xs) !important; }
.m3-gap-sm { gap: var(--m3-spacing-sm) !important; }
.m3-gap-md { gap: var(--m3-spacing-md) !important; }
.m3-gap-lg { gap: var(--m3-spacing-lg) !important; }
.m3-gap-xl { gap: var(--m3-spacing-xl) !important; }
.m3-gap-2xl { gap: var(--m3-spacing-2xl) !important; }

.m3-mt-xs { margin-top: var(--m3-spacing-xs) !important; }
.m3-mt-sm { margin-top: var(--m3-spacing-sm) !important; }
.m3-mt-md { margin-top: var(--m3-spacing-md) !important; }
.m3-mt-lg { margin-top: var(--m3-spacing-lg) !important; }
.m3-mt-xl { margin-top: var(--m3-spacing-xl) !important; }
.m3-mt-2xl { margin-top: var(--m3-spacing-2xl) !important; }

.m3-mb-xs { margin-bottom: var(--m3-spacing-xs) !important; }
.m3-mb-sm { margin-bottom: var(--m3-spacing-sm) !important; }
.m3-mb-md { margin-bottom: var(--m3-spacing-md) !important; }
.m3-mb-lg { margin-bottom: var(--m3-spacing-lg) !important; }
.m3-mb-xl { margin-bottom: var(--m3-spacing-xl) !important; }
.m3-mb-2xl { margin-bottom: var(--m3-spacing-2xl) !important; }

.m3-pa-xs { padding: var(--m3-spacing-xs) !important; }
.m3-pa-sm { padding: var(--m3-spacing-sm) !important; }
.m3-pa-md { padding: var(--m3-spacing-md) !important; }
.m3-pa-lg { padding: var(--m3-spacing-lg) !important; }
.m3-pa-xl { padding: var(--m3-spacing-xl) !important; }
.m3-pa-2xl { padding: var(--m3-spacing-2xl) !important; }

/* ==========================================================================
   M3 状态卡片样式 (Dashboard Cards)
   ========================================================================== */
.m3-stat-card {
    border-radius: var(--m3-shape-md);
    padding: var(--m3-spacing-lg);
    transition: all var(--m3-duration-medium) var(--m3-easing-standard);
    box-shadow: 0px 1px 2px rgba(0,0,0,0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
    /* 确保所有卡片高度一致 */
    height: 100%;
    display: flex;
    flex-direction: column;
}

.m3-stat-card:hover {
    box-shadow: 0px 2px 3px rgba(0,0,0,0.3), 0px 6px 10px 4px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

/* 优化背景色对比度 - 使用更深的颜色和明显的边框 */
.m3-stat-card-primary {
    background-color: #E3F2FD; /* Blue 50 - 更深的蓝色背景 */
    border-left: 4px solid var(--mud-palette-primary);
}

.m3-stat-card-secondary {
    background-color: #E0F7FA; /* Cyan 50 - 更深的青色背景 */
    border-left: 4px solid var(--mud-palette-secondary);
}

.m3-stat-card-success {
    background-color: #E8F5E9; /* Green 50 - 更深的绿色背景 */
    border-left: 4px solid var(--mud-palette-success);
}

.m3-stat-card-warning {
    background-color: #FFF3E0; /* Orange 50 - 更深的橙色背景 */
    border-left: 4px solid var(--mud-palette-warning);
}

.m3-stat-card-error {
    background-color: #FFEBEE; /* Red 50 - 更深的红色背景 */
    border-left: 4px solid var(--mud-palette-error);
}

.m3-stat-card-info {
    background-color: #E1F5FE; /* Light Blue 50 - 更深的浅蓝色背景 */
    border-left: 4px solid var(--mud-palette-info);
}

/* ==========================================================================
   M3 导航样式 (Navigation)
   ========================================================================== */
.m3-nav-section-title {
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: var(--m3-spacing-lg);
    margin-bottom: var(--m3-spacing-sm);
}

.m3-nav-item {
    border-radius: var(--m3-shape-xl);
    margin: var(--m3-spacing-xs) var(--m3-spacing-sm);
    transition: all var(--m3-duration-short) var(--m3-easing-standard);
}

.m3-nav-item:hover {
    background-color: rgba(103, 80, 164, 0.08);
}

/* ==========================================================================
   M3 表格优化 (Table Improvements)
   ========================================================================== */
.m3-table-container {
    border-radius: var(--m3-shape-md);
    overflow: hidden;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
}

.m3-empty-state {
    padding: var(--m3-spacing-3xl) var(--m3-spacing-xl);
    text-align: center;
}

.m3-empty-state-icon {
    font-size: 64px;
    opacity: 0.3;
    margin-bottom: var(--m3-spacing-lg);
}

/* ==========================================================================
   M3 响应式设计 (Responsive Design)
   ========================================================================== */
@media (max-width: 960px) {
    .m3-container-compact,
    .m3-container-medium,
    .m3-container-expanded {
        padding: var(--m3-spacing-md);
    }
    
    .m3-stat-card {
        padding: var(--m3-spacing-md);
    }
    
    .m3-button-lg {
        padding: 10px 24px !important;
        font-size: 0.875rem !important;
    }
}

@media (max-width: 600px) {
    .m3-container-compact,
    .m3-container-medium,
    .m3-container-expanded {
        padding: var(--m3-spacing-sm);
    }
    
    .m3-stat-card {
        padding: var(--m3-spacing-sm);
    }
}

/* ==========================================================================
   M3 滚动条样式 (Scrollbar)
   ========================================================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--mud-palette-divider);
    border-radius: var(--m3-shape-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mud-palette-text-secondary);
}

/* ==========================================================================
   M3 动画类 (Animation Classes)
   ========================================================================== */
.m3-fade-in {
    animation: m3FadeIn var(--m3-duration-medium) var(--m3-easing-standard);
}

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

.m3-scale-in {
    animation: m3ScaleIn var(--m3-duration-medium) var(--m3-easing-emphasized);
}

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

/* ==========================================================================
   M3 状态提示增强 (Snackbar Enhancement)
   ========================================================================== */
.mud-snackbar {
    border-radius: var(--m3-shape-sm) !important;
}

/* ==========================================================================
   M3 对话框增强 (Dialog Enhancement)
   ========================================================================== */
.mud-dialog {
    border-radius: var(--m3-shape-lg) !important;
}

.mud-dialog-actions .mud-button {
    border-radius: var(--m3-shape-xl) !important;
    text-transform: none !important;
    font-weight: 500 !important;
}

/* ==========================================================================
   Card Grid Enhancements (卡片网格增强)
   ========================================================================== */
.connection-card,
.service-card {
    transition: transform var(--m3-duration-medium) var(--m3-easing-standard),
                box-shadow var(--m3-duration-medium) var(--m3-easing-standard) !important;
    cursor: default;
}

.connection-card:hover,
.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0px 4px 8px rgba(0,0,0,0.15), 0px 8px 16px 4px rgba(0,0,0,0.1) !important;
}

/* Skeleton Loading Animation (骨架屏加载动画) */
.skeleton-card {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite ease-in-out;
    border-radius: var(--m3-shape-md);
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Empty State (空状态) */
.m3-empty-state {
    padding: var(--m3-spacing-4xl) var(--m3-spacing-xl);
    text-align: center;
}

.m3-empty-state-icon {
    font-size: 80px !important;
    opacity: 0.3;
    margin-bottom: var(--m3-spacing-lg);
}

/* Responsive Card Grid (响应式卡片网格) */
@media (max-width: 599px) {
    .connection-card,
    .service-card {
        margin-bottom: var(--m3-spacing-md);
    }
}

@media (min-width: 600px) and (max-width: 959px) {
    .connection-card:hover,
    .service-card:hover {
        transform: translateY(-2px);
    }
}

/* Load More Section (加载更多区域) */
.load-more-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--m3-spacing-2xl) 0;
}

/* Fade-in Animation for Cards (卡片淡入动画) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-fade-in {
    animation: fadeInUp var(--m3-duration-medium) var(--m3-easing-emphasized);
}

/* ==========================================================================
   Responsive Utilities (响应式工具类)
   ========================================================================== */

/* 响应式间距 - 小屏减少间距 */
@media (max-width: 600px) {
    /* xs breakpoint */
    .m3-container-compact,
    .m3-container-medium,
    .m3-container-expanded,
    .m3-container-full {
        padding: var(--m3-spacing-sm);
    }
    
    /* 减少卡片内边距 */
    .m3-card {
        padding: var(--m3-spacing-md);
    }
    
    /* 小屏标题字体缩小 */
    .mud-typography-h4 {
        font-size: 1.5rem !important;
    }
    
    .mud-typography-h5 {
        font-size: 1.25rem !important;
    }
    
    /* 按钮在小屏占满宽 */
    .m3-button-responsive {
        width: 100%;
    }
}

@media (min-width: 601px) and (max-width: 960px) {
    /* sm breakpoint */
    .m3-container-compact,
    .m3-container-medium,
    .m3-container-expanded,
    .m3-container-full {
        padding: var(--m3-spacing-lg);
    }
}

/* 响应式间距类 */
.m3-mb-xs { margin-bottom: var(--m3-spacing-xs) !important; }
.m3-mb-sm { margin-bottom: var(--m3-spacing-sm) !important; }
.m3-mb-md { margin-bottom: var(--m3-spacing-md) !important; }
.m3-mb-lg { margin-bottom: var(--m3-spacing-lg) !important; }
.m3-mb-xl { margin-bottom: var(--m3-spacing-xl) !important; }

/* 响应式间距 - 在小屏上减少 */
@media (max-width: 600px) {
    .m3-mb-sm-xs { margin-bottom: var(--m3-spacing-xs) !important; }
    .m3-mb-sm-sm { margin-bottom: var(--m3-spacing-sm) !important; }
    .m3-mb-sm-md { margin-bottom: var(--m3-spacing-md) !important; }
    .m3-mb-xl { margin-bottom: var(--m3-spacing-lg) !important; }
}