/* wind_styles.css - COMPLETE PROFESSIONAL ENTERPRISE UPGRADE
   🚀 ENTERPRISE-GRADE WIND LOAD CALCULATOR SIDEBAR  
   ✅ ALL ORIGINAL FUNCTIONALITY PRESERVED + PROFESSIONAL ENHANCEMENTS
   ✅ PROFESSIONAL IMPROVEMENTS: Enhanced hamburger icon, consistent widths, readable text
   ✅ PREMIUM FEATURES: Professional colors, refined animations, micro-interactions
   ✅ ENTERPRISE POLISH: Glassmorphism, professional badges, custom scrollbar
   ✅ MOBILE RESPONSIVE: Professional mobile design with accessibility features */

/* ===================================================================
   PROFESSIONAL BASE SYSTEM - ENHANCED
   ================================================================== */

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===================================================================
   PROFESSIONAL SIDEBAR SYSTEM - ENHANCED WITH ORIGINAL FUNCTIONALITY
   ================================================================== */

.wind-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 380px;
    height: 100vh;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 75%, #334155 100%);
    box-shadow: 
        4px 0 24px rgba(0, 0, 0, 0.4),
        inset -1px 0 0 rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.wind-sidebar.collapsed {
    width: 70px;
}

/* ===================================================================
   PROFESSIONAL SIDEBAR HEADER - ENHANCED WITH ORIGINAL
   ================================================================== */

.sidebar-header {
    display: flex;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    min-height: 60px;
    gap: 15px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
}

.wind-sidebar.collapsed .sidebar-header {
    padding: 20px 15px;
    justify-content: center;
}

.sidebar-brand {
    font-size: 22px;
    font-weight: 700;
    color: #f8fafc;
    white-space: nowrap;
    letter-spacing: -0.025em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.wind-sidebar.collapsed .sidebar-brand {
    display: none;
}

.sidebar-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    margin: 0;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ===================================================================
   PROFESSIONAL HAMBURGER ICON - ENHANCED DESIGN
   ================================================================== */

.menu-toggle-btn {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.9) 0%, rgba(59, 130, 246, 0.8) 100%) !important;
    border: 2px solid rgba(96, 165, 250, 0.5) !important;
    border-radius: 10px !important;
    width: 44px !important;
    height: 44px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 
        0 6px 20px rgba(96, 165, 250, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.menu-toggle-btn:hover {
    background: linear-gradient(135deg, rgba(96, 165, 250, 1) 0%, rgba(59, 130, 246, 0.95) 100%) !important;
    border-color: rgba(96, 165, 250, 0.8) !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 
        0 8px 25px rgba(96, 165, 250, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.menu-toggle-btn:active {
    transform: translateY(-1px) scale(1.02) !important;
    transition: all 0.1s ease !important;
}

.hamburger-icon {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    width: 20px !important;
    height: 14px !important;
    justify-content: space-between !important;
}

.hamburger-line {
    width: 20px !important;
    height: 2.5px !important;
    background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%) !important;
    border-radius: 1.25px !important;
    display: block !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
}

.professional-hamburger-line {
    width: 20px !important;
    height: 2.5px !important;
    background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%) !important;
    border-radius: 1.25px !important;
    display: block !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
}

.hamburger-line:nth-child(1) {
    transform-origin: top left;
}

.hamburger-line:nth-child(3) {
    transform-origin: bottom left;
}

/* Hamburger default state - blue lines */
.menu-toggle-btn .hamburger-line,
.menu-toggle-btn .professional-hamburger-line {
    background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%) !important;  /* Blue default state */
}

/* Hamburger animation on hover */
.menu-toggle-btn:hover .hamburger-line,
.menu-toggle-btn:hover .professional-hamburger-line {
    background: linear-gradient(90deg, #1d4ed8 0%, #1e40af 100%) !important;  /* Darker blue on hover */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    transform: scale(1.05) !important;  /* Optional: slight scale effect */
}

/* ===================================================================
   PROFESSIONAL BADGE SYSTEM - NEW FEATURE ENHANCEMENT
   ================================================================== */

/* Universal Badge Styling - Enhanced */
.menu-badge,
.feature-badge,
.sidebar-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 12px !important;
    padding: 4px 10px !important;
    margin-left: auto !important;
    white-space: nowrap !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid transparent !important;
    position: relative !important;
    overflow: hidden !important;
}

/* SOON Badge - Professional Orange */
.badge-soon,
.menu-badge.soon {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    color: #ffffff !important;
    border-color: rgba(249, 115, 22, 0.5) !important;
    box-shadow: 
        0 4px 12px rgba(249, 115, 22, 0.5),
        0 0 20px rgba(249, 115, 22, 0.3) !important;
    animation: professionalPulse 2.5s ease-in-out infinite !important;
}

.badge-soon:hover,
.menu-badge.soon:hover {
    transform: scale(1.1) !important;
    box-shadow: 
        0 6px 16px rgba(249, 115, 22, 0.7),
        0 0 30px rgba(249, 115, 22, 0.5) !important;
    animation: none;
}

/* AI Badge - Professional Purple */
.badge-ai,
.menu-badge.ai {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    color: #ffffff !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
    box-shadow: 
        0 4px 12px rgba(139, 92, 246, 0.5),
        0 0 20px rgba(139, 92, 246, 0.3) !important;
    animation: professionalGlow 3s ease-in-out infinite !important;
}

.badge-ai:hover,
.menu-badge.ai:hover {
    transform: scale(1.1) !important;
    box-shadow: 
        0 6px 16px rgba(139, 92, 246, 0.7),
        0 0 30px rgba(139, 92, 246, 0.5) !important;
    animation: none;
}

/* 2024 Badge - Professional Blue */
.badge-2024,
.menu-badge.year {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 
        0 4px 12px rgba(59, 130, 246, 0.5),
        0 0 20px rgba(59, 130, 246, 0.3) !important;
}

.badge-2024:hover,
.menu-badge.year:hover {
    transform: scale(1.1) !important;
    box-shadow: 
        0 6px 16px rgba(59, 130, 246, 0.7),
        0 0 30px rgba(59, 130, 246, 0.5) !important;
}

/* PRO Badge - Professional Gold */
.badge-pro,
.menu-badge.pro {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
    box-shadow: 
        0 4px 12px rgba(245, 158, 11, 0.5),
        0 0 20px rgba(245, 158, 11, 0.3) !important;
}

.badge-pro:hover,
.menu-badge.pro:hover {
    transform: scale(1.1) !important;
    box-shadow: 
        0 6px 16px rgba(245, 158, 11, 0.7),
        0 0 30px rgba(245, 158, 11, 0.5) !important;
}

/* BETA Badge - Professional Red */
.badge-beta,
.menu-badge.beta {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    box-shadow: 
        0 4px 12px rgba(239, 68, 68, 0.5),
        0 0 20px rgba(239, 68, 68, 0.3) !important;
}

.badge-beta:hover,
.menu-badge.beta:hover {
    transform: scale(1.1) !important;
    box-shadow: 
        0 6px 16px rgba(239, 68, 68, 0.7),
        0 0 30px rgba(239, 68, 68, 0.5) !important;
}

/* NEW Badge - Professional Green */
.badge-new,
.menu-badge.new {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
    box-shadow: 
        0 4px 12px rgba(16, 185, 129, 0.5),
        0 0 20px rgba(16, 185, 129, 0.3) !important;
}

.badge-new:hover,
.menu-badge.new:hover {
    transform: scale(1.1) !important;
    box-shadow: 
        0 6px 16px rgba(16, 185, 129, 0.7),
        0 0 30px rgba(16, 185, 129, 0.5) !important;
}

/* Professional Badge Animations */
@keyframes professionalPulse {
    0%, 100% {
        box-shadow: 
            0 4px 12px rgba(249, 115, 22, 0.5),
            0 0 20px rgba(249, 115, 22, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 
            0 6px 16px rgba(249, 115, 22, 0.7),
            0 0 30px rgba(249, 115, 22, 0.5);
        transform: scale(1.05);
    }
}

@keyframes professionalGlow {
    0%, 100% {
        box-shadow: 
            0 4px 12px rgba(139, 92, 246, 0.5),
            0 0 20px rgba(139, 92, 246, 0.3);
    }
    33% {
        box-shadow: 
            0 6px 16px rgba(139, 92, 246, 0.7),
            0 0 30px rgba(139, 92, 246, 0.5);
    }
    66% {
        box-shadow: 
            0 4px 12px rgba(139, 92, 246, 0.5),
            0 0 25px rgba(139, 92, 246, 0.4);
    }
}

/* Badge in Collapsed Sidebar */
.wind-sidebar.collapsed .menu-badge,
.wind-sidebar.collapsed .feature-badge,
.wind-sidebar.collapsed .sidebar-badge {
    display: none;
}

/* ===================================================================
   TORNADO LOADS SECTION - DISTINCTIVE THEMING 🌪️ - ENHANCED
   ================================================================== */

/* Tornado Section Header */
.section-header.tornado-section {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%);
    border-radius: 10px;
    margin-bottom: 5px;
    position: relative;
    overflow: hidden;
}

.section-header.tornado-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        transparent 40%, 
        rgba(239, 68, 68, 0.1) 50%, 
        transparent 60%);
    animation: tornadoSweep 4s linear infinite;
}

.section-header.tornado-section .section-header-content {
    color: #fca5a5;
    position: relative;
    z-index: 2;
}

.section-header.tornado-section .menu-icon {
    color: #ef4444 !important;
    font-size: 16px !important;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.section-header.tornado-section .section-subtitle {
    color: #fed7d7;
    font-weight: 500;
}

/* Tornado Menu Items */
.menu-section.tornado-menu .sidebar-link {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(220, 38, 38, 0.05) 100%);
    border-left: 3px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.menu-section.tornado-menu .sidebar-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.menu-section.tornado-menu .sidebar-link:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%);
    color: #fca5a5;
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.2);
}

.menu-section.tornado-menu .sidebar-link:hover::before {
    transform: scaleY(1);
}

.menu-section.tornado-menu .sidebar-link:active,
.menu-section.tornado-menu .sidebar-link.active {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.15) 100%);
    border-left: 3px solid #ef4444;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.3);
}

/* Tornado Animation */
@keyframes tornadoSweep {
    0% {
        transform: translateX(-100%) rotate(0deg);
    }
    100% {
        transform: translateX(100%) rotate(360deg);
    }
}

/* ===================================================================
   MULTI-CODE INTELLIGENCE - ENHANCED VISUAL HIERARCHY 📚
   ================================================================== */

/* Multi-Code Section Header */
.section-header.multicode-section {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%);
    border-radius: 10px;
    margin-bottom: 5px;
    position: relative;
    overflow: hidden;
}

.section-header.multicode-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(59, 130, 246, 0.1) 25%, 
        rgba(37, 99, 235, 0.1) 50%,
        rgba(29, 78, 216, 0.1) 75%,
        transparent 100%);
    animation: codeFlow 3s ease-in-out infinite;
}

.section-header.multicode-section .section-header-content {
    color: #93c5fd;
    position: relative;
    z-index: 2;
}

.section-header.multicode-section .menu-icon {
    color: #3b82f6 !important;
    font-size: 16px !important;
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.section-header.multicode-section .section-subtitle {
    color: #bfdbfe;
    font-weight: 500;
}

/* Multi-Code Menu Items with Hierarchy */
.menu-section.multicode-menu .sidebar-link {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(37, 99, 235, 0.05) 100%);
    border-left: 3px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.menu-section.multicode-menu .sidebar-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.menu-section.multicode-menu .sidebar-link::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: #3b82f6;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.3s ease;
}

.menu-section.multicode-menu .sidebar-link:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%);
    color: #93c5fd;
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
}

.menu-section.multicode-menu .sidebar-link:hover::before {
    transform: scaleY(1);
}

.menu-section.multicode-menu .sidebar-link:hover::after {
    opacity: 1;
    transform: translateY(-50%) scale(1.2);
}

.menu-section.multicode-menu .sidebar-link:active,
.menu-section.multicode-menu .sidebar-link.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.15) 100%);
    border-left: 3px solid #3b82f6;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
}

/* Code Version Indicator */
.code-version-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 6px;
    background: rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    font-size: 8px;
    font-weight: 700;
    color: #93c5fd;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Multi-Code Animation */
@keyframes codeFlow {
    0%, 100% {
        opacity: 0.5;
        transform: translateX(-10px);
    }
    50% {
        opacity: 1;
        transform: translateX(10px);
    }
}

/* ===================================================================
   ADVANCED TOOLS - PREMIUM STYLING 🔧 - ENHANCED
   ================================================================== */

/* Advanced Tools Section Header */
.section-header.advanced-section {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.1) 100%);
    border-radius: 10px;
    margin-bottom: 5px;
    position: relative;
    overflow: hidden;
}

.section-header.advanced-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(16, 185, 129, 0.1) 0%, 
        rgba(5, 150, 105, 0.05) 50%,
        rgba(4, 120, 87, 0.1) 100%);
    animation: advancedShimmer 2s ease-in-out infinite alternate;
}

.section-header.advanced-section .section-header-content {
    color: #6ee7b7;
    position: relative;
    z-index: 2;
}

.section-header.advanced-section .menu-icon {
    color: #10b981 !important;
    font-size: 16px !important;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.section-header.advanced-section .section-subtitle {
    color: #a7f3d0;
    font-weight: 500;
}

/* Advanced Tools Menu Items */
.menu-section.advanced-menu .sidebar-link {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.05) 100%);
    border-left: 3px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.menu-section.advanced-menu .sidebar-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #10b981 0%, #047857 100%);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.menu-section.advanced-menu .sidebar-link::after {
    content: '⚡';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    opacity: 0;
    transition: all 0.3s ease;
    color: #10b981;
}

.menu-section.advanced-menu .sidebar-link:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.1) 100%);
    color: #6ee7b7;
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}

.menu-section.advanced-menu .sidebar-link:hover::before {
    transform: scaleY(1);
}

.menu-section.advanced-menu .sidebar-link:hover::after {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

.menu-section.advanced-menu .sidebar-link:active,
.menu-section.advanced-menu .sidebar-link.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.15) 100%);
    border-left: 3px solid #10b981;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
}

/* Premium Tool Indicator */
.premium-tool-indicator {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 1px 4px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 6px;
    font-size: 7px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.3);
}

/* Advanced Animation */
@keyframes advancedShimmer {
    0% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}

/* ===================================================================
   PROFESSIONAL SECTION HEADERS - ENHANCED TYPOGRAPHY & CONSISTENT WIDTH
   ================================================================== */

.section-header {
    padding: 14px 20px 10px;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 10px;
    margin: 6px 12px;
    width: calc(100% - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    box-sizing: border-box !important;
    position: relative;
    overflow: hidden;
}

.section-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    transition: left 0.5s ease;
}

.section-header:hover::before {
    left: 100%;
}

.section-header-content {
    display: flex;
    align-items: center;
    color: #f8fafc !important;  /* High contrast white */
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px !important;
    line-height: 1.3 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative;
    z-index: 2;
}

.section-header:hover .section-header-content {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.section-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.section-title {
    flex: 1;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    line-height: 1.2 !important;
}

.section-subtitle {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #cbd5e1 !important;  /* Improved contrast */
    text-transform: none !important;
    letter-spacing: 0.025em !important;
    margin-top: 2px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

.wind-sidebar.collapsed .section-text {
    display: none;
}

/* ===================================================================
   PROFESSIONAL MENU ICONS - STANDARDIZED & ENHANCED
   ================================================================== */

.section-header .menu-icon {
    color: #60a5fa !important;
    font-size: 16px !important;
    margin-right: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.4)) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.section-header:hover .menu-icon {
    color: #93c5fd !important;
    filter: drop-shadow(0 0 8px rgba(147, 197, 253, 0.6)) !important;
    transform: scale(1.1) !important;
}

.wind-sidebar.collapsed .section-header .menu-icon {
    margin-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 auto !important;
}

/* ===================================================================
   PROFESSIONAL COLLAPSE ARROWS - SMOOTH ROTATIONS
   ================================================================== */

.collapse-arrow {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-size: 12px !important;
    margin-left: 8px !important;
    color: #60a5fa !important;
    font-weight: 600 !important;
    transform: rotate(0deg) !important;
    filter: drop-shadow(0 1px 2px rgba(96, 165, 250, 0.3)) !important;
}

.collapse-arrow.rotated {
    transform: rotate(90deg) !important;
}

.wind-sidebar.collapsed .collapse-arrow {
    display: none;
}

/* ===================================================================
   PROFESSIONAL MENU SECTIONS - CONSISTENT WIDTH SYSTEM
   ================================================================== */

.menu-section {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-item {
    margin: 0;
}

/* PROFESSIONAL MENU LINKS - CONSISTENT WIDTH & ENHANCED STYLING */
.sidebar-link {
    display: flex !important;
    align-items: center !important;
    padding: 12px 20px !important;
    color: #f1f5f9 !important;  /* High contrast text */
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    margin: 3px 12px !important;
    width: calc(100% - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    box-sizing: border-box !important;
    letter-spacing: 0.025em !important;
    border: 1px solid transparent !important;
}

.sidebar-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.15), transparent);
    transition: left 0.4s ease;
    border-radius: 8px;
}

.sidebar-link:hover::before {
    left: 100%;
}

.sidebar-link:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateX(4px) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.sidebar-link:active,
.sidebar-link.active {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    color: #ffffff !important;
    border-color: rgba(96, 165, 250, 0.6) !important;
    box-shadow: 
        0 6px 20px rgba(96, 165, 250, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    font-weight: 600 !important;
    border-right: 3px solid #3b82f6 !important;
}

/* Indentation for subcategories */
.menu-section .sidebar-item .sidebar-link {
    padding-left: 40px;
}

.wind-sidebar.collapsed .menu-section .sidebar-item .sidebar-link {
    padding-left: 20px;
}

.menu-icon {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    color: #60a5fa !important;
    font-size: 16px !important;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(96, 165, 250, 0.3)) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sidebar-link:hover .menu-icon {
    color: #93c5fd !important;
    filter: drop-shadow(0 0 6px rgba(147, 197, 253, 0.5)) !important;
    transform: scale(1.05) !important;
}

.sidebar-link.active .menu-icon {
    color: #ffffff !important;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4)) !important;
}

.wind-sidebar.collapsed .menu-icon {
    margin-right: 0;
}

.menu-label {
    font-weight: 500 !important;
    white-space: nowrap !important;
    color: inherit !important;
}

.wind-sidebar.collapsed .menu-label {
    display: none;
}

.wind-sidebar.collapsed .section-title {
    display: none;
}

/* Original Badge Styling - keeping for backward compatibility */
.menu-badge {
    margin-left: auto;
    background: #059669;
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}

.wind-sidebar.collapsed .menu-badge {
    display: none;
}

/* ===================================================================
   PROFESSIONAL SUBSECTION SYSTEM - CONSISTENT WIDTH & ENHANCED
   ================================================================== */

/* Subsections */
.subsection {
    margin: 0;
}

.subsection-title {
    display: block;
    padding: 10px 18px 6px 40px;
    color: #f8fafc !important;  /* High contrast white */
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px !important;
    width: calc(100% - 24px) !important;
    margin: 4px 12px !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.subsection-title:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    transform: translateX(2px) !important;
}

.wind-sidebar.collapsed .subsection-title {
    display: none;
}

.submenu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.submenu .sidebar-link {
    padding-left: 60px;
    font-size: 13px;
    color: #cbd5e1 !important;
    width: calc(100% - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    box-sizing: border-box !important;
}

.submenu .sidebar-link:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.wind-sidebar.collapsed .submenu .sidebar-link {
    padding-left: 20px;
}

/* ===================================================================
   PROFESSIONAL CONTENT WRAPPER SYSTEM - PRESERVED ORIGINAL
   ================================================================== */

/* Content Wrapper and Fixed Header - USE CSS VARIABLES for consistency */
.content-wrapper {
    margin-left: var(--sidebar-width, 380px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: calc(100vw - var(--sidebar-width, 380px));
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.content-wrapper.expanded {
    margin-left: var(--sidebar-width, 380px);
    width: calc(100vw - var(--sidebar-width, 380px));
}

.content-wrapper.collapsed-right {
    margin-left: var(--sidebar-collapsed, 60px);
    width: calc(100vw - var(--sidebar-collapsed, 60px));
}

/* Fixed White Header */
.fixed-header {
    background: white;
    padding: 15px 25px;
    border-bottom: 2px solid #1e40af;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    min-height: 50px;
    z-index: 100;
    flex-shrink: 0;
}

/* Main Content Container - Enhanced Background */
.main-content-container {
    flex: 1;
    overflow-y: auto;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    position: relative;
}

.main-content-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 10% 30%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 70%, rgba(16, 185, 129, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* MAIN CONTENT AREA - UPDATED FOR NEW STRUCTURE */
#main-content {
    margin-left: 0;
    margin-top: 0;
    padding: 0;
    min-height: 100%;
    transition: inherit;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    position: relative;
    top: 0;
    left: 0;
}

/* Content Area - Universal Premium Design */
.content-area {
    margin-left: 0;
    margin-top: 0;
    padding: 30px;
    min-height: calc(100vh - 80px);
    transition: inherit;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
}

/* Page Headers - Universal Premium Design */
.page-header {
    margin-bottom: 30px;
    padding: 30px 20px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(16, 185, 129, 0.15) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 16px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 20% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(16, 185, 129, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.page-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    margin: 0 0 10px 0;
    background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 50%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
    line-height: 1.1;
    word-wrap: break-word;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 15px;
}

.page-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: #94a3b8;
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.02em;
    word-wrap: break-word;
    position: relative;
    z-index: 2;
}

/* Cards and Panels - Universal Premium Design */
.card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 30px;
    margin-bottom: 30px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.25),
        0 8px 32px rgba(59, 130, 246, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.card h3 {
    margin-top: 0;
    color: white;
    font-size: clamp(18px, 3vw, 22px);
    font-weight: 600;
    word-wrap: break-word;
    margin-bottom: 20px;
}

.card h4 {
    color: white;
    font-weight: 600;
    margin: 0;
    font-size: 16px;
}

.card p {
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: #e2e8f0;
    margin: 8px 0;
    line-height: 1.5;
}

/* Help & Documentation - Premium Design */
.doc-item {
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 12px;
}

.doc-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateX(8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.doc-link {
    color: #60a5fa;
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.doc-link:hover {
    color: #93c5fd;
    text-decoration: underline;
}

/* AI Help Response Styling */
.ai-help-response {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    padding: 20px;
    margin-top: 15px;
}

/* Search Results Styling */
.help-search-results {
    margin-top: 20px;
}

.help-search-results .card {
    margin-bottom: 15px;
    transition: transform 0.2s ease;
}

.help-search-results .card:hover {
    transform: translateY(-2px);
}

/* Quick Reference Code Styling */
code {
    background: rgba(0, 0, 0, 0.3);
    color: #93c5fd;
    padding: 8px 12px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    display: block;
    margin-bottom: 8px;
    border-left: 3px solid #3b82f6;
}

/* Documentation Category Cards */
.doc-category-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 25px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.doc-category-card:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-4px);
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.25),
        0 8px 32px rgba(59, 130, 246, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Personal Dashboard Styling */
.personal-help-dashboard {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

/* Smart Suggestions Button Styling */
.suggestion-button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e2e8f0;
    padding: 12px 16px;
    width: 100%;
    text-align: left;
    border-radius: 6px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.suggestion-button:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
    transform: translateX(5px);
}

/* Quick Start Buttons */
.quick-start-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 15px;
}

.quick-start-buttons button {
    flex: 1;
    min-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Universal Premium Form Elements */
input[type="email"],
input[type="password"],
input[type="text"],
select,
textarea,
.form-input,
.form-select {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #1e293b !important;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 15px;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus,
select:focus,
textarea:focus,
.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 
        0 0 0 3px rgba(59, 130, 246, 0.2),
        0 8px 25px rgba(59, 130, 246, 0.15);
    background: rgba(255, 255, 255, 0.98) !important;
    transform: translateY(-1px);
}

.form-input::placeholder {
    color: rgba(30, 41, 59, 0.5);
}

/* Universal Premium Button Styling */
button {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    position: relative;
    overflow: hidden;
}

button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s;
}

button:hover::before {
    left: 100%;
}

button:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

button:active {
    transform: translateY(0);
}

button.success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

button.success:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}

button.danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

button.danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
}

/* Form Styling */
.form-group {
    margin-bottom: 20px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-label {
    display: block;
    font-weight: 600;
    color: white;
    margin-bottom: 8px;
    font-size: 14px;
}

.form-help {
    display: block;
    color: #94a3b8;
    font-size: 12px;
    margin-top: 6px;
    line-height: 1.4;
}

.card-description {
    color: #cbd5e1;
    margin-bottom: 25px;
    font-size: 15px;
    line-height: 1.5;
}

/* Checkbox and Toggle Styling */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.checkbox-label, .toggle-label {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #e2e8f0;
    cursor: pointer;
    font-weight: 500;
}

.checkbox-label input, .toggle-label input {
    margin-right: 10px;
    width: 16px;
    height: 16px;
    accent-color: #3b82f6;
}

.checkbox-label:hover, .toggle-label:hover {
    color: white;
}

/* AI Preferences Styling */
.ai-preferences-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ai-preferences-list .form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e2e8f0;
    font-size: 14px;
}

.ai-preferences-list input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #3b82f6;
}

/* Radio Group Styling */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.radio-group .form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e2e8f0;
    font-size: 14px;
}

.radio-group input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #3b82f6;
}

/* Dropdown Styling */
.Select-control {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #1e293b !important;
}

.Select-placeholder {
    color: rgba(30, 41, 59, 0.5) !important;
}

.Select-menu-outer {
    background-color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.Select-option {
    background-color: #ffffff !important;
    color: #1e293b !important;
}

.Select-option:hover {
    background-color: #f1f5f9 !important;
}

/* AI Enhanced Cards */
.ai-enhanced {
    border-left: 4px solid #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.ai-enhanced h3 {
    color: #93c5fd;
}

/* Button Groups */
.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.button-group button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.button-group button.primary {
    background: #3b82f6;
    color: white;
}

.button-group button.primary:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

.button-group button.success {
    background: #10b981;
    color: white;
}

.button-group button.success:hover {
    background: #059669;
    transform: translateY(-1px);
}

/* Select Dropdown Styling */
.form-select option {
    background: #ffffff;
    color: #1e293b;
}

/* Dashboard Layout */
.dashboard-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 25px;
}

.dashboard-middle-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 25px;
}

/* Activity Items */
.activity-item {
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-item h4 {
    margin: 0 0 5px 0;
    color: white;
    font-size: 16px;
    font-weight: 600;
}

/* Statistics Grid - Premium Universal Design */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    text-align: center;
    margin-bottom: 30px;
}

.stat-item,
.stat-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(15px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 25px 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.stat-item::before,
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s;
}

.stat-item:hover::before,
.stat-card:hover::before {
    left: 100%;
}

.stat-item:hover,
.stat-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 8px 32px rgba(59, 130, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.stat-number {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.stat-label {
    margin: 8px 0 0 0;
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 500;
}

/* Tools Grid */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* Tool Cards - Premium Design */
.tool-card {
    padding: 30px 25px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s;
}

.tool-card:hover::before {
    left: 100%;
}

.tool-card:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 8px 32px rgba(59, 130, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.tool-card h4 {
    margin: 10px 0 8px 0;
    color: white;
    font-size: 15px;
    font-weight: 600;
}

.tool-card p {
    margin: 0;
    color: #e2e8f0;
    line-height: 1.4;
}

/* AI Input Styling */
.ai-input {
    color: white !important;
}

.ai-input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Button Variants */
button.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

button.secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

button.primary {
    background: #3b82f6;
    color: white;
}

button.primary:hover {
    background: #2563eb;
}

/* Universal Content Animation */
.content-area > *,
.card,
.tool-card,
.doc-category-card,
.form-group {
    animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.content-area > *:nth-child(1) { animation-delay: 0.1s; }
.content-area > *:nth-child(2) { animation-delay: 0.2s; }
.content-area > *:nth-child(3) { animation-delay: 0.3s; }
.content-area > *:nth-child(4) { animation-delay: 0.4s; }
.content-area > *:nth-child(5) { animation-delay: 0.5s; }
.content-area > *:nth-child(n+6) { animation-delay: 0.6s; }

/* AI Assistant Fix */
.ai-wind-load-assistant,
.ai-assistant,
[class*="ai-"],
.card:has([class*="ai"]) {
    background: rgba(15, 23, 42, 0.9) !important;
}

/* Search Box Fix - Smart Search/Suggestion */
input,
textarea,
select,
.smart-suggestion input,
.smart-search input,
[class*="smart"] input {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Smart suggestion/search container spacing */
.smart-suggestion,
.smart-search,
[class*="smart"],
div:has(input[placeholder*="Smart"]) {
    margin-bottom: 25px !important;
    padding-bottom: 15px !important;
}

/* Search wrapper spacing */
.search-wrapper,
.search-section,
div:has(input[placeholder*="Search"]),
div:has(input[placeholder*="search"]) {
    margin-bottom: 25px !important;
    padding-bottom: 15px !important;
}

/* Search Results and Content Spacing */
.help-search-results,
.search-results,
.content-section {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
}

/* ===================================================================
   PROFESSIONAL CUSTOM SCROLLBAR - ENHANCED
   ================================================================== */

.wind-sidebar::-webkit-scrollbar {
    width: 8px;
}

.wind-sidebar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.wind-sidebar::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.6) 0%, rgba(59, 130, 246, 0.4) 100%);
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.wind-sidebar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.8) 0%, rgba(59, 130, 246, 0.6) 100%);
}

/* ===== QUICK START WIZARD ENHANCEMENTS ===== */

/* Quick Start Wizard Container */
.quick-start-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
}

/* Wizard Header */
.wizard-header {
    text-align: center;
    padding: 30px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.wizard-title {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 10px 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.wizard-subtitle {
    font-size: 1.1rem !important;
    color: #94a3b8 !important;
    margin: 0 0 20px 0 !important;
}

.wizard-instructions {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    text-align: left;
}

.wizard-instructions h4 {
    color: #60a5fa !important;
    margin: 0 0 10px 0 !important;
    font-size: 1.1rem !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wizard-instructions ul {
    color: #cbd5e1;
    margin: 0;
    padding-left: 20px;
}

.wizard-instructions li {
    margin-bottom: 8px;
    line-height: 1.5;
}

/* Progress Bar */
.progress-container {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.progress-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.progress-counter {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.progress-bar-container {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #10b981);
    width: 0%;
    transition: width 0.5s ease;
    border-radius: 4px;
}

/* Wizard Steps */
.wizard-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.wizard-step {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 30px;
    transition: all 0.3s ease;
    opacity: 0.4;
    pointer-events: none;
}

.wizard-step.active {
    opacity: 1;
    pointer-events: all;
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
}

.wizard-step.completed {
    opacity: 1;
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.05);
}

.step-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.step-number {
    width: 40px;
    height: 40px;
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border: 2px solid rgba(59, 130, 246, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}

.wizard-step.active .step-number {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

.wizard-step.completed .step-number {
    background: #10b981;
    color: #ffffff;
    border-color: #10b981;
}

.step-title {
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0 !important;
}

.step-description {
    color: #94a3b8 !important;
    font-size: 14px !important;
    margin: 5px 0 0 0 !important;
    line-height: 1.4;
}

/* Form Content */
.step-content {
    display: grid;
    gap: 20px;
}

/* Required star styling */
.required-star {
    color: #ef4444;
    font-weight: 700;
}

/* Input with button styling */
.input-with-button {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.input-with-button .form-input {
    flex: 1;
}

.lookup-btn {
    background: #3b82f6;
    color: #ffffff;
    border: none;
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.lookup-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

/* Radio Option Styling */
.radio-option {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    gap: 15px;
    margin-bottom: 10px;
}

.radio-option:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.radio-option.selected {
    background: rgba(59, 130, 246, 0.15);
    border-color: #3b82f6;
}

.radio-option input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #3b82f6;
}

.radio-content {
    flex: 1;
}

.radio-title {
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 4px 0;
    font-size: 15px;
}

.radio-description {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
    line-height: 1.3;
}

/* Smart Suggestions */
.smart-suggestions {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
}

.suggestions-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.suggestions-title {
    font-weight: 600;
    color: #c084fc;
    margin: 0;
    font-size: 16px;
}

.suggestion-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.suggestion-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(5px);
}

.suggestion-icon {
    color: #c084fc;
    font-size: 16px;
    margin-top: 2px;
}

.suggestion-text {
    color: #e2e8f0;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
}

/* Navigation Buttons */
.step-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-btn.prev {
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-btn.prev:hover {
    background: rgba(255, 255, 255, 0.15);
}

.nav-btn.next {
    background: #3b82f6;
    color: #ffffff;
}

.nav-btn.next:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

.nav-btn.calculate {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    font-size: 16px;
    padding: 15px 30px;
}

.nav-btn.calculate:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}

.nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Validation Messages */
.validation-message {
    margin-top: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.validation-message.error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.validation-message.success {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}

.validation-message.warning {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}

/* Preview Card */
.preview-card {
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
}

.preview-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.preview-title {
    font-weight: 600;
    color: #67e8f9;
    margin: 0;
    font-size: 16px;
}

.preview-content {
    color: #e2e8f0;
    font-size: 14px;
    line-height: 1.5;
}

.preview-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.preview-stat {
    text-align: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #67e8f9;
    margin: 0;
}

.stat-label {
    font-size: 12px;
    color: #94a3b8;
    margin: 4px 0 0 0;
}

/* Results Preview */
.results-preview {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    padding: 25px;
    margin-top: 30px;
    text-align: center;
}

.results-icon {
    font-size: 3rem;
    color: #10b981;
    margin-bottom: 15px;
}

.results-title {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 10px 0 !important;
}

.results-description {
    color: #94a3b8 !important;
    margin: 0 0 20px 0 !important;
    line-height: 1.5;
}

.quick-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.quick-result-item {
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.result-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #10b981;
    margin: 0 0 4px 0;
}

.result-label {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
}

/* Help Tooltips */
.help-tooltip {
    position: relative;
    display: inline-block;
    margin-left: 5px;
}

.help-icon {
    width: 16px;
    height: 16px;
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: help;
}

.tooltip-content {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.95);
    color: #e2e8f0;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.help-tooltip:hover .tooltip-content {
    opacity: 1;
}

/* ===== DASHBOARD MAIN PAGE ENHANCEMENTS ===== */

/* Dashboard Container */
.dashboard-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Dashboard Header with Advanced Styling */
.dashboard-header {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(16, 185, 129, 0.15) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.dashboard-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 20% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(16, 185, 129, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.dashboard-header-text {
    position: relative;
    z-index: 2;
    text-align: left;
    margin-bottom: 40px;
}

.dashboard-title {
    font-size: clamp(2.5rem, 5vw, 4rem) !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 50%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 15px 0 !important;
    text-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
    line-height: 1.1 !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

.dashboard-subtitle {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem) !important;
    color: #94a3b8 !important;
    margin: 0 !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em;
    text-align: left;
}

/* Stats Grid - Premium Design */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    position: relative;
    z-index: 2;
}

.stat-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(15px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s;
}

.stat-card:hover::before {
    left: 100%;
}

.stat-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 8px 32px rgba(59, 130, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.stat-card-inner {
    padding: 30px 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 100%;
    position: relative;
    z-index: 2;
    text-align: center;
    flex-direction: column;
}

.stat-icon {
    font-size: 2.5rem;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-bottom: 10px;
}

.stat-icon.active {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.3);
    animation: pulse 2s infinite;
}

.stat-icon.success {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.3);
}

.stat-icon.warning {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.3);
}

.stat-content {
    flex: 1;
    text-align: center;
}

.stat-number {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 8px 0 !important;
    line-height: 1 !important;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
}

.stat-label {
    font-size: 0.95rem !important;
    color: #cbd5e1 !important;
    margin: 0 !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Dashboard Main Content */
.dashboard-main {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    padding: 40px;
    max-width: 1600px;
    margin: 0 auto;
}

.dashboard-left {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.dashboard-right {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Dashboard Cards - Premium Design */
.dashboard-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dashboard-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.25),
        0 8px 32px rgba(59, 130, 246, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Chart Headers */
.chart-header {
    padding: 30px 30px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.chart-header h3 {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 8px 0 !important;
    display: flex;
    align-items: center;
}

.chart-subtitle {
    color: #94a3b8 !important;
    font-size: 14px !important;
    margin: 0 !important;
    font-weight: 500 !important;
}

/* Chart Containers */
.chart-container {
    padding: 20px 30px 30px;
}

/* AI Insights Special Styling */
.dashboard-card.ai-insights {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(59, 130, 246, 0.08) 100%);
    border-color: rgba(139, 92, 246, 0.3);
}

.insights-content {
    padding: 20px 30px 30px;
}

.insight-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.insight-item:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateX(8px);
    border-color: rgba(255, 255, 255, 0.2);
}

.insight-button {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.insight-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}

/* Quick Actions Grid */
.actions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 20px 30px 30px;
}

.action-button {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 25px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-size: 14px;
    color: #e2e8f0;
}

.action-button:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px) translateX(5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.action-button.primary {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.15) 100%);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
}

.action-button.primary:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(37, 99, 235, 0.25) 100%);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.3);
}

.action-text {
    flex: 1;
}

.action-title {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
}

.action-subtitle {
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.3;
}

/* Projects List */
.projects-list {
    padding: 20px 30px 30px;
}

.project-item {
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.project-item-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.project-item-inner:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateX(8px);
}

.project-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border-radius: 10px;
    font-size: 18px;
    flex-shrink: 0;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.project-info {
    flex: 1;
}

.project-title {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
}

.project-type {
    font-size: 13px;
    color: #10b981;
    margin-bottom: 2px;
    font-weight: 500;
}

.project-time {
    font-size: 12px;
    color: #94a3b8;
}

.project-status {
    flex-shrink: 0;
}

.view-all-link {
    color: #60a5fa;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.view-all-link:hover {
    color: #93c5fd;
    text-decoration: none;
    transform: translateX(5px);
}

/* System Status */
.status-content {
    padding: 20px 30px 30px;
}

.status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

.status-row:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(5px);
}

.status-item {
    font-size: 14px;
    color: #e2e8f0;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.status-value {
    font-size: 13px;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-value.good {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-value.warning {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-value.error {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Animations */
@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(16, 185, 129, 0.5);
    }
}

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

.dashboard-card {
    animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.stat-card:nth-child(1) { animation-delay: 0.1s; }
.stat-card:nth-child(2) { animation-delay: 0.2s; }
.stat-card:nth-child(3) { animation-delay: 0.3s; }
.stat-card:nth-child(4) { animation-delay: 0.4s; }

/* ===================================================================
   CALCULATION PREFERENCES CSS - NEW ADDITIONS
   ================================================================== */

/* Settings Navigation Styles */
.settings-nav {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 25px;
    height: fit-content;
    position: sticky;
    top: 30px;
}

.settings-nav h3 {
    color: #ffffff;
    margin-bottom: 25px;
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.settings-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.settings-nav ul li {
    margin-bottom: 5px;
}

/* Navigation Links */
.nav-link {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    color: #cbd5e1;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
}

.nav-link:hover {
    background: rgba(59, 130, 246, 0.15);
    color: #ffffff;
    text-decoration: none;
    transform: translateX(5px);
}

.nav-link.active {
    background: rgba(59, 130, 246, 0.25);
    color: #ffffff;
    border-left: 3px solid #3b82f6;
}

.nav-link i {
    margin-right: 10px;
    width: 16px;
    text-align: center;
}

/* Settings Content Area */
.settings-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Template Form Layout */
.template-form {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    padding: 0;
    max-width: 1400px;
    margin: 0 auto;
}

/* Enhanced Radio Groups */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.radio-group .form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e2e8f0;
    font-size: 14px;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.radio-group .form-check:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.radio-group input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #3b82f6;
}

/* Enhanced Checkbox Grid */
.checkbox-grid .form-check {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #e2e8f0;
    font-size: 14px;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.checkbox-grid .form-check:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateX(3px);
}

.checkbox-grid input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #3b82f6;
}

/* AI Preferences List - Enhanced */
.ai-preferences-list .form-check {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #e2e8f0;
    font-size: 14px;
    padding: 15px 18px;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.ai-preferences-list .form-check:hover {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.3);
    transform: translateX(5px);
}

.ai-preferences-list input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #8b5cf6;
}

/* Slider Customization */
.slider .rc-slider-rail {
    background: rgba(255, 255, 255, 0.2);
    height: 6px;
}

.slider .rc-slider-track {
    background: linear-gradient(90deg, #3b82f6, #10b981);
    height: 6px;
}

.slider .rc-slider-handle {
    border-color: #3b82f6;
    background: #ffffff;
    width: 18px;
    height: 18px;
    margin-top: -6px;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.slider .rc-slider-handle:hover,
.slider .rc-slider-handle:focus {
    border-color: #2563eb;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.slider .rc-slider-mark-text {
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 500;
}

/* Section Divider */
.section-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    margin: 40px 0;
}

/* Enhanced Form Labels */
.form-label {
    display: block;
    font-weight: 600;
    color: white;
    margin-bottom: 10px;
    font-size: 14px;
    letter-spacing: 0.3px;
}

.form-help {
    display: block;
    color: #94a3b8;
    font-size: 12px;
    margin-top: 8px;
    line-height: 1.4;
    font-style: italic;
}

/* Text Utilities for Preferences */
.text-white { color: #ffffff; }
.text-light { color: #e2e8f0; }
.text-muted { color: #94a3b8; }

.mb-lg { margin-bottom: 30px; }
.mb-md { margin-bottom: 20px; }

/* Card Variants for Preferences */
.card.ai-enhanced {
    border-left: 4px solid #3b82f6;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.05) 100%);
}

.card.card-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%);
    border-color: rgba(16, 185, 129, 0.3);
}

.card.card-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.15) 100%);
    border-color: rgba(245, 158, 11, 0.3);
}

/* ==========================================================================
   SUPER AGGRESSIVE CSS OVERRIDE - Replace previous injection
   Force override with maximum specificity
   ========================================================================== */

/* Force background change with maximum specificity */
html body div#react-entry-point div[data-dash-is-loading="false"] .results-container,
div.results-container,
.results-container {
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.1) 0%, 
        rgba(16, 185, 129, 0.1) 50%, 
        rgba(139, 92, 246, 0.1) 100%) !important;
    min-height: 100vh !important;
}

/* Force header styling */
html body .results-header,
.results-header {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 32px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* Force metric card styling */
html body .metric-card,
.metric-card {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* Main container with gradient background */
html body div#react-entry-point div[data-dash-is-loading="false"] div div div.results-container,
html body div#react-entry-point div div div.results-container,
html body div div div.results-container,
div div div.results-container,
div div.results-container,
div.results-container,
.results-container {
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.1) 0%, 
        rgba(16, 185, 129, 0.1) 50%, 
        rgba(139, 92, 246, 0.1) 100%) !important;
    min-height: 100vh !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 24px !important;
    border: none !important;
}

/* Header with beautiful glassmorphism */
html body div#react-entry-point div div div.results-header,
html body div div div.results-header,
div div div.results-header,
div div.results-header,
div.results-header,
.results-header {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 32px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    text-align: center !important;
}

/* Results grid system */
html body div div div.results-grid,
div div div.results-grid,
div div.results-grid,
div.results-grid,
.results-grid {
    display: grid !important;
    gap: 24px !important;
    margin-bottom: 24px !important;
}

html body div div div.results-grid-sidebar,
div div div.results-grid-sidebar,
div div.results-grid-sidebar,
div.results-grid-sidebar,
.results-grid-sidebar {
    grid-template-columns: 2fr 1fr !important;
}

html body div div div.results-main,
div div div.results-main,
div div.results-main,
div.results-main,
.results-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

html body div div div.results-sidebar,
div div div.results-sidebar,
div div.results-sidebar,
div.results-sidebar,
.results-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

/* Results summary grid */
html body div div div.results-summary,
div div div.results-summary,
div div.results-summary {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 20px !important;
    margin-bottom: 24px !important;
}

/* ===================================================================
   PROFESSIONAL LOADING STATES & SKELETON EFFECTS
   ================================================================== */

.professional-skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
    background-size: 200% 100%;
    animation: professionalShimmer 2s infinite;
}

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

/* ===================================================================
   PROFESSIONAL RESPONSIVE DESIGN SYSTEM - ENHANCED MOBILE SUPPORT
   ================================================================== */

@media (max-width: 1400px) {
    .dashboard-main {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .dashboard-right {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        display: grid;
    }
}

@media (max-width: 1200px) {
    .content-area {
        padding: 15px 20px;
    }
    
    .page-title {
        font-size: 30px;
    }
    
    .card {
        padding: 20px;
    }
    
    .template-form {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .settings-nav {
        position: static;
        order: 2;
    }
    
    .settings-content {
        order: 1;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .wind-sidebar {
        width: 320px;
    }

    .wind-sidebar.collapsed {
        width: var(--sidebar-collapsed, 60px);
    }

    .content-wrapper {
        margin-left: 320px;
        width: calc(100vw - 320px);
    }

    .content-wrapper.collapsed-right {
        margin-left: var(--sidebar-collapsed, 60px);
        width: calc(100vw - var(--sidebar-collapsed, 60px));
    }
}

@media (max-width: 768px) {
    .wind-sidebar {
        transform: translateX(-100%);
        z-index: 1001;
        width: 300px;
    }

    .wind-sidebar.collapsed {
        width: var(--sidebar-collapsed, 60px);
        transform: translateX(0);
    }

    .wind-sidebar.mobile-open {
        transform: translateX(0);
    }

    .content-wrapper {
        margin-left: 0;
        width: 100vw;
    }

    .content-wrapper.expanded,
    .content-wrapper.collapsed-right {
        margin-left: 0;
        width: 100vw;
    }
    
    .fixed-header {
        padding: 10px 15px;
    }
    
    .fixed-header img {
        height: 40px;
    }
    
    .page-title {
        font-size: 26px;
    }
    
    .card {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .quick-start-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .quick-start-buttons button {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .dashboard-header {
        padding: 30px 20px;
    }
    
    .dashboard-main {
        padding: 20px;
        gap: 20px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .dashboard-right {
        grid-template-columns: 1fr;
    }
    
    .dashboard-title {
        font-size: 2.5rem !important;
    }
    
    .stat-card-inner {
        padding: 20px 15px;
        gap: 15px;
    }
    
    .stat-icon {
        width: 50px;
        height: 50px;
        font-size: 1.8rem;
    }
    
    .stat-number {
        font-size: 2rem !important;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .dashboard-top-row,
    .dashboard-middle-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .quick-start-container {
        padding: 15px;
    }
    
    .wizard-title {
        font-size: 2rem !important;
        flex-direction: column;
        gap: 10px;
    }
    
    .input-with-button {
        flex-direction: column;
        align-items: stretch;
    }
    
    .step-navigation {
        flex-direction: column;
        gap: 15px;
    }
    
    .nav-btn {
        width: 100%;
        justify-content: center;
    }
    
    .quick-results {
        grid-template-columns: 1fr;
    }
    
    .preview-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .button-group {
        flex-direction: column;
        width: 100%;
    }
    
    .button-group button {
        width: 100%;
        min-width: auto;
    }
    
    .checkbox-grid {
        grid-template-columns: 1fr;
    }
    
    .settings-nav {
        padding: 20px;
    }
    
    .template-form {
        padding: 20px;
    }
    
    /* Enhanced mobile menu styling */
    .sidebar-link {
        padding: 14px 20px !important;
        font-size: 15px !important;
    }
    
    .section-header-content {
        font-size: 15px !important;
    }
    
    .section-title {
        font-size: 13px !important;
        line-height: 1.15 !important;
    }
}

@media (max-width: 640px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .tools-grid {
        grid-template-columns: 1fr;
    }
    
    .quick-start-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .quick-start-buttons button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .checkbox-grid {
        grid-template-columns: 1fr;
    }
    
    .button-group {
        flex-direction: column;
        width: 100%;
    }
    
    .button-group button {
        width: 100%;
        justify-content: center;
    }
    
    .content-area {
        padding: 10px;
    }
    
    .fixed-header {
        padding: 8px 10px;
    }
    
    .fixed-header img {
        height: 35px;
    }
    
    .page-title {
        font-size: 22px;
    }
    
    .page-subtitle {
        font-size: 14px;
    }
    
    .card {
        padding: 15px;
    }
    
    .dashboard-header {
        padding: 20px 15px;
    }
    
    .dashboard-main {
        padding: 15px;
    }
    
    .chart-header {
        padding: 20px 20px 15px;
    }
    
    .chart-container {
        padding: 15px 20px 20px;
    }
    
    .actions-grid {
        padding: 15px 20px 20px;
    }
    
    .projects-list {
        padding: 15px 20px 20px;
    }
    
    .status-content {
        padding: 15px 20px 20px;
    }
    
    .wizard-step {
        padding: 20px;
    }
    
    .step-header {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .preview-stats {
        grid-template-columns: 1fr;
    }
    
    .settings-nav h3 {
        font-size: 1.1rem;
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
    
    .nav-link {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .form-grid {
        gap: 15px;
    }
    
    .validation-message {
        padding: 12px 15px;
        font-size: 13px;
    }
    
    .wind-sidebar {
        width: 280px;
    }
    
    .sidebar-link {
        padding: 12px 16px !important;
        font-size: 14px !important;
    }
    
    .section-header {
        padding: 12px 16px 8px !important;
    }
    
    .section-title {
        font-size: 12px !important;
        line-height: 1.1 !important;
    }
}

/* ===================================================================
   PROFESSIONAL ACCESSIBILITY ENHANCEMENTS
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
    .wind-sidebar,
    .sidebar-link,
    .section-header,
    .subsection-header,
    .menu-badge,
    .hamburger-line,
    .collapse-arrow {
        transition: none !important;
        animation: none !important;
    }
    
    .professionalPulse,
    .professionalGlow,
    .tornadoSweep,
    .codeFlow,
    .advancedShimmer,
    .professionalShimmer {
        animation: none !important;
    }
}

@media (prefers-contrast: high) {
    .section-header-content {
        color: #ffffff !important;
        font-weight: 800 !important;
    }
    
    .sidebar-link {
        color: #ffffff !important;
        font-weight: 600 !important;
    }
    
    .sidebar-link:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        border: 2px solid rgba(255, 255, 255, 0.6) !important;
    }
    
    .hamburger-line {
        background: #ffffff !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    }
}

/* ===================================================================
   PROFESSIONAL PERFORMANCE OPTIMIZATIONS
   ================================================================== */

.wind-sidebar,
.sidebar-link,
.section-header,
.subsection-header,
.hamburger-icon {
    transform: translateZ(0);
    will-change: transform, background, backdrop-filter;
    backface-visibility: hidden;
}

/* Hardware acceleration for smooth animations */
.sidebar-link::before,
.section-header::before,
.stat-card::before,
.tool-card::before {
    transform: translateZ(0);
    will-change: transform;
}

/* ELECTRIC COLOR HIERARCHY CSS - FIXED VERSION
   Replace the existing electric color section in wind_styles.css with this */

/* Main category icons - Aqua Electric */
.section-header .menu-icon,
.professional-menu-icon {
    color: #00ffff !important;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.6) !important;
    filter: none !important;
    opacity: 1 !important;
    font-size: 18px !important;
    width: 24px !important;
    height: 24px !important;
}

/* Sub-category icons - Electric Blue */
.subsection-header .fas,
.professional-subsection-header .fas {
    color: #0080ff !important;
    text-shadow: 0 0 6px rgba(0, 128, 255, 0.5) !important;
    filter: none !important;
    opacity: 1 !important;
    font-size: 15px !important;
    width: 16px !important;
    height: 16px !important;
}

/* Sub-sub-category icons (indent level 2) - Turquoise Electric */
.submenu .sidebar-link .fas,
.subsection-menu .sidebar-link .fas {
    color: #40e0d0 !important;
    text-shadow: 0 0 4px rgba(64, 224, 208, 0.4) !important;
    filter: none !important;
    opacity: 1 !important;
    font-size: 16px !important;
    width: 20px !important;
    height: 20px !important;
}

/* Regular menu item icons - Electric Blue */
.sidebar-link .fas:not(.subsection-menu .sidebar-link .fas):not(.submenu .sidebar-link .fas) {
    color: #0080ff !important;
    text-shadow: 0 0 6px rgba(0, 128, 255, 0.5) !important;
    filter: none !important;
    opacity: 1 !important;
    font-size: 16px !important;
    width: 20px !important;
    height: 20px !important;
}

/* Arrow colors to match hierarchy */
.collapse-arrow,
.professional-collapse-arrow {
    color: #00ffff !important;
    text-shadow: 0 0 4px rgba(0, 255, 255, 0.4) !important;
}

.subsection-arrow,
.professional-subsection-arrow {
    color: #0080ff !important;
    text-shadow: 0 0 4px rgba(0, 128, 255, 0.3) !important;
}

/* Hover effects with electric glow */
.sidebar-link:hover .fas {
    text-shadow: 0 0 12px rgba(0, 255, 255, 0.8) !important;
    transform: scale(1.05) !important;
}

.section-header:hover .menu-icon {
    text-shadow: 0 0 12px rgba(0, 255, 255, 0.8) !important;
    transform: scale(1.1) !important;
}

.subsection-header:hover .fas {
    text-shadow: 0 0 10px rgba(0, 128, 255, 0.7) !important;
    transform: scale(1.05) !important;
}

/* Active state glows */
.sidebar-link.active .fas {
    color: #00ffff !important;
    text-shadow: 0 0 15px rgba(0, 255, 255, 1) !important;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3) !important;
}

.section-header-content.active-section .menu-icon {
    color: #00ffff !important;
    text-shadow: 0 0 15px rgba(0, 255, 255, 1) !important;
}

.subsection-header.active-subsection .fas {
    color: #0080ff !important;
    text-shadow: 0 0 12px rgba(0, 128, 255, 0.8) !important;
}

/* Text readability with electric theme */
.menu-label,
.section-title,
.subsection-title {
    color: #f8fafc !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Electric glassmorphism borders */
.sidebar-link:hover {
    border: 1px solid rgba(0, 255, 255, 0.3) !important;
    box-shadow: 0 4px 15px rgba(0, 255, 255, 0.2) !important;
}

.section-header:hover {
    border: 1px solid rgba(0, 255, 255, 0.3) !important;
    box-shadow: 0 4px 15px rgba(0, 255, 255, 0.2) !important;
}

.subsection-header:hover {
    border: 1px solid rgba(0, 128, 255, 0.3) !important;
    box-shadow: 0 4px 15px rgba(0, 128, 255, 0.2) !important;
}

/* Text readability with electric theme */
.menu-label,
.section-title,
.subsection-title {
    color: #f8fafc !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Ensure consistent icon sizing */
.section-header .menu-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 18px !important;
}

.subsection-header .fas {
    width: 16px !important;
    height: 16px !important;
    font-size: 15px !important;
}

.sidebar-link .fas {
    width: 20px !important;
    height: 20px !important;
    font-size: 16px !important;
}

/* ===================================================================
   STICKY SIDEBAR HEADER IMPLEMENTATION
   Add these styles to the END of your wind_styles.css file
   ================================================================== */

/* Main sidebar container - ensure flex layout for sticky positioning */
.wind-sidebar,
.professional-wind-sidebar {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    overflow: hidden !important; /* Prevent outer scrolling */
}

/* Sticky header that stays at top */
.sidebar-header-sticky,
.professional-sidebar-header-sticky {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
    padding: 20px 24px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    flex-shrink: 0 !important; /* Prevent header from shrinking */
    min-height: 80px !important;
    box-sizing: border-box !important;
    /* Add subtle shadow to separate from scrollable content */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Scrollable content area */
.sidebar-content-scrollable,
.professional-sidebar-content-scrollable {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 20px 0 20px 0 !important; /* Remove horizontal padding here, let menu items handle it */
    height: calc(100vh - 120px) !important; /* Adjust based on header height */
    scroll-behavior: smooth !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(96, 165, 250, 0.5) transparent !important;
}

/* Custom scrollbar for webkit browsers */
.sidebar-content-scrollable::-webkit-scrollbar,
.professional-sidebar-content-scrollable::-webkit-scrollbar {
    width: 6px !important;
}

.sidebar-content-scrollable::-webkit-scrollbar-track,
.professional-sidebar-content-scrollable::-webkit-scrollbar-track {
    background: transparent !important;
}

.sidebar-content-scrollable::-webkit-scrollbar-thumb,
.professional-sidebar-content-scrollable::-webkit-scrollbar-thumb {
    background: rgba(96, 165, 250, 0.5) !important;
    border-radius: 3px !important;
    transition: background 0.3s ease !important;
}

.sidebar-content-scrollable::-webkit-scrollbar-thumb:hover,
.professional-sidebar-content-scrollable::-webkit-scrollbar-thumb:hover {
    background: rgba(96, 165, 250, 0.7) !important;
}

/* Ensure collapsed sidebar works with sticky header */
.wind-sidebar.collapsed .sidebar-header-sticky,
.wind-sidebar.collapsed .professional-sidebar-header-sticky {
    padding: 20px 15px !important;
    justify-content: center !important;
}

.wind-sidebar.collapsed .sidebar-content-scrollable,
.wind-sidebar.collapsed .professional-sidebar-content-scrollable {
    padding: 20px 0 20px 0 !important;
}

/* Hide brand text in collapsed mode */
.wind-sidebar.collapsed .sidebar-brand,
.wind-sidebar.collapsed .professional-sidebar-brand {
    display: none !important;
}

/* Hide divider in collapsed mode */
.wind-sidebar.collapsed .sidebar-divider,
.wind-sidebar.collapsed .professional-sidebar-divider {
    display: none !important;
}

/* Ensure menu sections maintain proper spacing in scrollable area */
.sidebar-content-scrollable .menu-section,
.professional-sidebar-content-scrollable .menu-section {
    margin-bottom: 20px !important;
}

/* Ensure section headers maintain proper width in scrollable container */
.sidebar-content-scrollable .section-header,
.professional-sidebar-content-scrollable .section-header {
    width: calc(100% - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
}

/* Ensure sidebar links maintain proper width in scrollable container */
.sidebar-content-scrollable .sidebar-link,
.professional-sidebar-content-scrollable .sidebar-link {
    width: calc(100% - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
}

/* Ensure subsection headers maintain proper width in scrollable container */
.sidebar-content-scrollable .subsection-header,
.professional-sidebar-content-scrollable .subsection-header {
    width: calc(100% - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .sidebar-header-sticky,
    .professional-sidebar-header-sticky {
        padding: 15px 20px !important;
        min-height: 70px !important;
    }
    
    .sidebar-content-scrollable,
    .professional-sidebar-content-scrollable {
        height: calc(100vh - 100px) !important;
        padding: 15px 0 15px 0 !important;
    }
    
    /* Adjust menu item widths on mobile */
    .sidebar-content-scrollable .section-header,
    .professional-sidebar-content-scrollable .section-header,
    .sidebar-content-scrollable .sidebar-link,
    .professional-sidebar-content-scrollable .sidebar-link,
    .sidebar-content-scrollable .subsection-header,
    .professional-sidebar-content-scrollable .subsection-header {
        width: calc(100% - 20px) !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
}

@media (max-width: 480px) {
    .sidebar-header-sticky,
    .professional-sidebar-header-sticky {
        padding: 12px 15px !important;
        min-height: 60px !important;
        gap: 12px !important;
    }
    
    .sidebar-content-scrollable,
    .professional-sidebar-content-scrollable {
        height: calc(100vh - 84px) !important;
        padding: 12px 0 12px 0 !important;
    }
    
    /* Further adjust menu item widths on small mobile */
    .sidebar-content-scrollable .section-header,
    .professional-sidebar-content-scrollable .section-header,
    .sidebar-content-scrollable .sidebar-link,
    .professional-sidebar-content-scrollable .sidebar-link,
    .sidebar-content-scrollable .subsection-header,
    .professional-sidebar-content-scrollable .subsection-header {
        width: calc(100% - 16px) !important;
        margin-left: 8px !important;
        margin-right: 8px !important;
    }
}

/* Smooth scroll behavior for better UX */
.sidebar-content-scrollable,
.professional-sidebar-content-scrollable {
    scroll-padding-top: 20px !important;
}

/* Focus management for accessibility */
.sidebar-content-scrollable:focus,
.professional-sidebar-content-scrollable:focus {
    outline: 2px solid rgba(96, 165, 250, 0.5) !important;
    outline-offset: -2px !important;
}

/* Performance optimizations for scrolling */
.sidebar-content-scrollable,
.professional-sidebar-content-scrollable {
    -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
    transform: translateZ(0) !important; /* Force hardware acceleration */
}

/* ===================================================================
   END OF COMPLETE PROFESSIONAL ENTERPRISE WIND_STYLES.CSS
   🚀 ENTERPRISE-GRADE COMPLETE - READY FOR DEPLOYMENT!
   ✅ ALL ORIGINAL FUNCTIONALITY PRESERVED
   ✅ PROFESSIONAL HAMBURGER ICON - Enhanced blue gradient design
   ✅ CONSISTENT WIDTH HIGHLIGHTING - All menu items same width
   ✅ HIGH-CONTRAST TEXT - Excellent readability for all text
   ✅ PROFESSIONAL ICONS - Standardized 16px with glow effects  
   ✅ ENHANCED BADGE SYSTEM - Professional gradients with animations
   ✅ SMOOTH ARROW ROTATIONS - 90-degree rotations with cubic-bezier
   ✅ ENTERPRISE GLASSMORPHISM - Consistent across all menu levels
   ✅ CUSTOM SCROLLBAR - Professional gradient design
   ✅ MOBILE RESPONSIVE - Professional mobile design
   ✅ ACCESSIBILITY - Reduced motion and high contrast support
   ✅ PERFORMANCE OPTIMIZED - Hardware acceleration and smooth animations
   ================================================================== */

   /* UNIVERSAL ELECTRIC COLOR APPLICATION - FIXED VERSION */

/* Main category section headers - Aqua Electric */
.section-header .menu-icon,
.professional-section-header .menu-icon {
    color: #00ffff !important;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.6) !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Subsection headers - Electric Blue OR Electric Yellow for Solar */
.subsection-header .fas {
    color: #0080ff !important;
    text-shadow: 0 0 6px rgba(0, 128, 255, 0.5) !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Solar Panel subsection - Electric Yellow */
#cc-solar-header .fas {
    color: #FFD700 !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6) !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Solar Panel sub-category items - Solar Orange variations */
.sidebar-link[href="/cc/solar/rooftop-flat-lowslope"] .fas {
    color: #FF8C00 !important;
    text-shadow: 0 0 6px rgba(255, 140, 0, 0.5) !important;
    filter: none !important;
    opacity: 1 !important;
}

.sidebar-link[href="/cc/solar/rooftop-parallel"] .fas {
    color: #FF9500 !important;
    text-shadow: 0 0 6px rgba(255, 149, 0, 0.5) !important;
    filter: none !important;
    opacity: 1 !important;
}

.sidebar-link[href="/cc/solar/ground-mount-fixed"] .fas {
    color: #FFA500 !important;
    text-shadow: 0 0 6px rgba(255, 165, 0, 0.5) !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Roofs subsection - Forest Green */
#cc-roofs-header .fas {
    color: #00FF00 !important;
    text-shadow: 0 0 6px rgba(0, 255, 0, 0.5) !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Roofs sub-category items - Distinct Green variations (more specific selectors) */
.sidebar-link[href="/cc/roofs/gable"] i.fas,
a[href="/cc/roofs/gable"] i.fas {
    color: #90EE90 !important;
    text-shadow: 0 0 6px rgba(144, 238, 144, 0.5) !important;
    filter: none !important;
    opacity: 1 !important;
}

.sidebar-link[href="/cc/roofs/hip"] i.fas,
a[href="/cc/roofs/hip"] i.fas {
    color: #90EE90 !important;
    text-shadow: 0 0 6px rgba(144, 238, 144, 0.5) !important;
    filter: none !important;
    opacity: 1 !important;
}

.sidebar-link[href="/cc/roofs/monoslope"] i.fas,
a[href="/cc/roofs/monoslope"] i.fas {
    color: #90EE90 !important;
    text-shadow: 0 0 6px rgba(144, 238, 144, 0.5) !important;
    filter: none !important;
    opacity: 1 !important;
}

.sidebar-link[href="/cc/roofs/flat"] i.fas,
a[href="/cc/roofs/flat"] i.fas {
    color: #90EE90 !important;
    text-shadow: 0 0 6px rgba(144, 238, 144, 0.5) !important;
    filter: none !important;
    opacity: 1 !important;
}

.sidebar-link[href="/cc/roofs/sawtooth"] i.fas,
a[href="/cc/roofs/sawtooth"] i.fas {
    color: #90EE90 !important;
    text-shadow: 0 0 6px rgba(144, 238, 144, 0.5) !important;
    filter: none !important;
    opacity: 1 !important;
}

.sidebar-link[href="/cc/roofs/multispan"] i.fas,
a[href="/cc/roofs/multispan"] i.fas {
    color: #90EE90 !important;
    text-shadow: 0 0 6px rgba(144, 238, 144, 0.5) !important;
    filter: none !important;
    opacity: 1 !important;
}

.sidebar-link[href="/cc/roofs/curved"] i.fas,
a[href="/cc/roofs/curved"] i.fas {
    color: #90EE90 !important;
    text-shadow: 0 0 6px rgba(144, 238, 144, 0.5) !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Walls subsection - Deep Pink/Magenta */
#cc-walls-header .fas {
    color: #FF1493 !important;
    text-shadow: 0 0 8px rgba(255, 20, 147, 0.6) !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Walls sub-category items - Pink/Magenta variations */
.sidebar-link[href="/cc/walls/windows-doors-shutters"] .fas {
    color: #FF69B4 !important;
    text-shadow: 0 0 6px rgba(255, 105, 180, 0.5) !important;
}

.sidebar-link[href="/cc/walls/wall-cladding"] .fas {
    color: #DA70D6 !important;
    text-shadow: 0 0 6px rgba(218, 112, 214, 0.5) !important;
}

/* Force electric colors on ALL menu icons regardless of location */
.menu-icon,
.professional-menu-icon {
    color: #00ffff !important;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.6) !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Subsection icons */
.subsection-header .fas,
.professional-subsection-header .fas {
    color: #0080ff !important;
    text-shadow: 0 0 6px rgba(0, 128, 255, 0.5) !important;
}

/* Sub-sub-category icons */
.sidebar-link[style*="margin-left: 40px"] .fas,
.sidebar-link[style*="padding-left: 60px"] .fas {
    color: #40e0d0 !important;
    text-shadow: 0 0 4px rgba(64, 224, 208, 0.4) !important;
}