/* ==================================
   DCA Calculator Modern Enhancement v2024
   Progressive enhancement strategy
   ================================== */

:root {
    /* 2024 Modern Financial Color System */
    --primary: 220 100% 50%;      /* Modern blue - trust */
    --primary-50: 239 246 255;
    --primary-100: 219 234 254;
    --primary-500: 59 130 246;
    --primary-600: 37 99 235;
    --primary-700: 29 78 216;
    
    --secondary: 262 83% 58%;     /* Purple gradient - innovation */
    --secondary-50: 250 245 255;
    --secondary-100: 243 232 255;
    --secondary-500: 168 85 247;
    --secondary-600: 147 51 234;
    
    --success: 142 69% 58%;       /* Modern green - profit */
    --success-50: 240 253 244;
    --success-500: 34 197 94;
    --success-600: 22 163 74;
    
    --warning: 38 92% 50%;        /* Orange warning */
    --warning-50: 255 251 235;
    --warning-500: 245 158 11;
    --warning-600: 217 119 6;
    
    --danger: 0 84% 60%;          /* Modern red - loss */
    --danger-50: 254 242 242;
    --danger-500: 239 68 68;
    --danger-600: 220 38 38;
    
    /* Glassmorphism effect variables */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    --glass-backdrop: blur(8px); /* Reduced blur for stability */
    
    /* Depth and shadow system */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* ==================================
   Progressive background modernization
   ================================== */

body {
    /* Subtle background upgrade */
    background: linear-gradient(135deg, 
        hsl(var(--primary) / 0.05) 0%, 
        hsl(var(--secondary) / 0.05) 50%,
        hsl(var(--primary) / 0.03) 100%);
    min-height: 100vh;
    position: relative;
}

/* ==================================
   Modern card system (non-breaking)
   ================================== */

/* Enhanced input sections with subtle glass effect */
.input-section {
    /* 使用玻璃态变量以保持原有卡片质感，同时兼容深浅色 */
    background: var(--glass-bg);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow);
    border-radius: 16px;
    transition: all 0.3s ease;
    position: relative;
}

.input-section:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
    border-color: hsl(var(--primary) / 0.2);
}

/* Enhanced result sections */
.result-section {
    /* 使用玻璃态变量以保持原有卡片质感，同时兼容深浅色 */
    background: var(--glass-bg);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.result-section:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

/* ==================================
   Modern button enhancements
   ================================== */

.calculate-btn {
    background: linear-gradient(135deg, 
        hsl(var(--primary)) 0%, 
        hsl(var(--secondary)) 100%);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.calculate-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    filter: brightness(1.05);
}

/* ==================================
   Modern form elements
   ================================== */

.input-group input {
    border-radius: 8px;
    border: 1px solid hsl(var(--primary) / 0.2);
    /* 跟随主题变量，避免固定白色在暗色下失配 */
    background: var(--bg-surface);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.input-group input:focus {
    border-color: hsl(var(--primary));
    box-shadow: 
        0 0 0 2px hsl(var(--primary) / 0.1),
        var(--shadow);
    /* 聚焦态同样保持主题一致 */
    background: var(--bg-surface);
    color: var(--text-primary);
}

/* ==================================
   Modern tabs
   ================================== */

.mode-tab {
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
}

.mode-tab:hover {
    background: hsl(var(--primary) / 0.1);
    color: hsl(var(--primary-700));
    transform: translateY(-1px);
}

.mode-tab.active {
    background: linear-gradient(135deg, 
        hsl(var(--primary)) 0%, 
        hsl(var(--secondary)) 100%);
    color: white;
    box-shadow: var(--shadow-md);
}

/* ==================================
   Accessibility and compatibility
   ================================== */

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .input-section,
    .result-section,
    .calculate-btn {
        transition: none;
    }
    
    .input-section:hover,
    .result-section:hover,
    .calculate-btn:hover,
    .mode-tab:hover {
        transform: none;
    }
}

/* Reduce transparency for performance */
@media (prefers-reduced-transparency: reduce) {
    .input-section,
    .result-section {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        /* 使用主题变量以适配深色模式 */
        background: var(--bg-surface) !important;
        border-color: var(--border-primary) !important;
    }
}

/* Mobile optimization */
@media (max-width: 768px) {
    .input-section,
    .result-section {
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    
    .input-section:hover,
    .result-section:hover {
        transform: none;
    }
}

/* Disable glass effects on low-end devices */
@media (max-width: 480px) {
    .input-section,
    .result-section {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        /* 移动端同样使用主题变量 */
        background: var(--bg-surface);
    }
}

/* Browser compatibility fallbacks */
@supports not (backdrop-filter: blur(4px)) {
    .input-section,
    .result-section {
        /* 无 blur 支持时仍保持半透明的主题玻璃色，避免变成纯白导致“失去质感” */
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
    }
}

/* 深色模式下微调玻璃感明暗关系（不改变主题变量，仅作视觉优化） */
.dark .input-section,
.dark .result-section {
    box-shadow: var(--shadow-md);
}

/* ==================================
   左侧导航栏系统
   ================================== */

/* 平台布局网格系统 */
.platform-layout {
    transition: grid-template-columns 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    /* GPU加速优化 */
    transform: translateZ(0);
    will-change: grid-template-columns;
}

/* 侧边栏基础样式 */
.sidebar {
    background: rgba(248, 250, 252, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-right: 1px solid hsl(var(--primary) / 0.1);
    /* 明确侧栏前景色，防止变量误用时的继承导致低对比度 */
    color: var(--text-primary);
    /* 性能优化 */
    transform: translateZ(0);
    will-change: auto;
}

/* 深色模式下侧栏的默认文字颜色更柔和一些 */
.dark .sidebar {
    color: var(--text-secondary);
}

/* 侧边栏按钮通用样式 */
.sidebar-item {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    /* 使用 rgb() 读取 RGB 令牌，避免将 RGB 三元组误用到 hsl() 导致不可读 */
    color: rgb(var(--primary-700));
    font-size: 0.875rem;
}

/* 侧边栏按钮悬停效果 */
.sidebar-item:hover {
    background: rgba(148, 163, 184, 0.15);
    transform: translateY(-1px);
    /* 悬停时提升为略浅的主色 */
    color: rgb(var(--primary-600));
}

/* 激活状态样式 */
.sidebar-item.active {
    background: linear-gradient(135deg, 
        hsl(var(--primary)) 0%, 
        hsl(var(--secondary)) 100%);
    color: white;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.sidebar-item.active:hover {
    filter: brightness(1.05);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* 侧边栏按钮图标样式 */
.sidebar-item span {
    transition: all 0.2s ease;
    line-height: 1;
}

/* 侧边栏按钮文字容器 */
.sidebar-item .font-medium {
    line-height: 1.2;
    margin-bottom: 2px;
}

.sidebar-item .text-xs {
    line-height: 1.3;
    color: inherit;
    opacity: 0.75;
}

/* 深色模式：侧边栏菜单文字统一白色（主标题与副标题） */
.dark .sidebar-item {
    color: #ffffff;
}
.dark .sidebar-item .font-medium,
.dark .sidebar-item .text-xs {
    color: #ffffff;
    opacity: 1; /* 明确取消副标题的半透明，确保“白色”视觉一致 */
}
.dark .sidebar-item:hover {
    color: #ffffff; /* 悬停仍保持白色，不改为品牌蓝 */
}

/* 收缩状态tooltip样式 */
.sidebar-item .absolute {
    /* 确保tooltip在收缩状态下正确显示 */
    transform: translateY(-50%);
    top: 50%;
    left: calc(100% + 8px);
    border-radius: 6px;
    font-size: 0.75rem;
    padding: 6px 8px;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(4px);
}

/* 切换按钮样式增强 */
.sidebar button[title*="切换侧边栏"] {
    transition: all 0.2s ease;
}

.sidebar button[title*="切换侧边栏"]:hover {
    background: rgba(148, 163, 184, 0.2) !important;
    transform: scale(1.05);
}

.sidebar button[title*="切换侧边栏"]:active {
    transform: scale(0.95);
}

/* ==================================
   侧边栏响应式优化
   ================================== */

/* 大屏幕优化 */
@media (min-width: 1024px) {
    .platform-layout {
        /* 在大屏幕上确保网格过渡更平滑 */
        grid-template-rows: 1fr;
    }
}

/* 移动端隐藏处理 */
@media (max-width: 1023px) {
    .sidebar {
        display: none !important;
    }
    
    .platform-layout {
        grid-template-columns: 1fr !important;
    }
}

/* 低端设备动画优化 */
@media (prefers-reduced-motion: reduce) {
    .platform-layout,
    .sidebar,
    .sidebar-item,
    .sidebar-item span,
    .sidebar button {
        transition: none !important;
        animation: none !important;
    }
    
    .sidebar-item:hover,
    .sidebar-item.active {
        transform: none !important;
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .sidebar {
        background: rgba(255, 255, 255, 0.95);
        border-right: 2px solid hsl(var(--primary));
    }
    
    .sidebar-item {
        border: 1px solid transparent;
    }
    
    .sidebar-item:hover {
        border-color: hsl(var(--primary));
        background: rgba(59, 130, 246, 0.1);
    }
    
    .sidebar-item.active {
        border-color: hsl(var(--primary));
        background: hsl(var(--primary));
    }
}

/* 透明度偏好支持 */
@media (prefers-reduced-transparency: reduce) {
    .sidebar {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgb(248, 250, 252) !important;
    }
    
    .sidebar-item .absolute {
        backdrop-filter: none !important;
        background: rgb(15, 23, 42) !important;
    }
}