/* PROFESSIONAL VIEW TOGGLE BUTTON FIX */
/* Overrides the terrible default button styling */

/* Remove the old terrible styling */
.view-toggle-container {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: calc(var(--mobile-spacing, 1rem) * 2) 0 !important;
    z-index: 50 !important;
}

.view-toggle-btn {
    /* Complete override with professional styling */
    position: relative !important;
    padding: 1rem 2.5rem !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    color: white !important;
    border-radius: 50px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 
        0 8px 25px rgba(102, 126, 234, 0.3),
        0 4px 10px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    min-height: 56px !important;
    min-width: 200px !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    overflow: hidden !important;
    backdrop-filter: blur(10px) !important;
}

/* Shimmer effect */
.view-toggle-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(
        90deg, 
        transparent, 
        rgba(255, 255, 255, 0.4), 
        transparent
    ) !important;
    transition: left 0.6s ease !important;
}

.view-toggle-btn:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 
        0 15px 40px rgba(102, 126, 234, 0.4),
        0 8px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important;
}

.view-toggle-btn:hover::before {
    left: 100% !important;
}

.view-toggle-btn:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .view-toggle-container {
        position: sticky !important;
        top: 1rem !important;
        z-index: 100 !important;
        margin: 1.5rem 0 !important;
        padding: 0 1rem !important;
        background: rgba(0, 0, 0, 0.1) !important;
        backdrop-filter: blur(20px) !important;
        border-radius: 60px !important;
        padding: 0.5rem !important;
    }
    
    .view-toggle-btn {
        width: 100% !important;
        max-width: 320px !important;
        padding: 1rem 2rem !important;
        font-size: 0.9rem !important;
        min-height: 52px !important;
        border-radius: 40px !important;
        
        /* Restore beautiful gradient for mobile */
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        border: none !important;
        color: white !important;
        font-weight: 700 !important;
        box-shadow: 
            0 8px 25px rgba(102, 126, 234, 0.3),
            0 4px 10px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    }
    
    .view-toggle-btn:hover {
        transform: translateY(-2px) scale(1.01) !important;
        background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important;
        box-shadow: 
            0 15px 40px rgba(102, 126, 234, 0.4),
            0 8px 20px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    }
}

/* Desktop positioning - make button match select styling exactly */
@media (min-width: 769px) {
    /* The button is now inside filter-controls grid */
    .filter-controls {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: var(--mobile-gap, 1rem) !important;
        align-items: end !important;
    }
    
    .view-toggle-container {
        position: static !important;
        display: flex !important;
        align-items: stretch !important;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        backdrop-filter: none !important;
        border: none !important;
        height: auto !important;
    }
    
    /* Make button look exactly like a select dropdown */
    .view-toggle-btn {
        width: 100% !important;
        min-width: auto !important;
        padding: 0.75rem !important;
        font-size: 0.9rem !important;
        min-height: 44px !important;
        height: 44px !important;
        border-radius: 8px !important;
        
        /* Match select styling exactly */
        background: var(--bg-tertiary, rgba(255, 255, 255, 0.08)) !important;
        border: 1px solid var(--border-secondary, rgba(255, 255, 255, 0.15)) !important;
        color: var(--text-primary, #ffffff) !important;
        font-family: var(--font-family-primary, 'Inter', sans-serif) !important;
        font-weight: 500 !important;
        
        /* Remove gradient to match selects */
        background: var(--bg-tertiary, rgba(255, 255, 255, 0.08)) !important;
        box-shadow: none !important;
    }
    
    .view-toggle-btn:hover {
        background: var(--bg-secondary, rgba(255, 255, 255, 0.05)) !important;
        transform: none !important;
        box-shadow: none !important;
    }
    
    .view-toggle-btn:active {
        transform: none !important;
        background: var(--bg-primary, rgba(255, 255, 255, 0.02)) !important;
    }
}

/* Landscape mobile - compact */
@media (orientation: landscape) and (max-width: 768px) and (max-height: 500px) {
    .view-toggle-container {
        position: static !important;
        margin: 1rem 0 !important;
        padding: 0 !important;
        background: none !important;
        backdrop-filter: none !important;
    }
    
    .view-toggle-btn {
        max-width: 250px !important;
        padding: 0.75rem 1.5rem !important;
        font-size: 0.85rem !important;
        min-height: 44px !important;
    }
}

/* Enhanced touch targets */
.view-toggle-btn {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(102, 126, 234, 0.3) !important;
}

/* Different view states */
.view-toggle-btn[data-view="cards"], 
.view-toggle-btn.cards-view {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    box-shadow: 
        0 8px 25px rgba(40, 167, 69, 0.3),
        0 4px 10px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.view-toggle-btn[data-view="cards"]:hover,
.view-toggle-btn.cards-view:hover {
    background: linear-gradient(135deg, #20c997 0%, #28a745 100%) !important;
    box-shadow: 
        0 15px 40px rgba(40, 167, 69, 0.4),
        0 8px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.view-toggle-btn[data-view="spreadsheet"],
.view-toggle-btn.spreadsheet-view {
    background: linear-gradient(135deg, #fd7e14 0%, #ff8c00 100%) !important;
    box-shadow: 
        0 8px 25px rgba(253, 126, 20, 0.3),
        0 4px 10px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.view-toggle-btn[data-view="spreadsheet"]:hover,
.view-toggle-btn.spreadsheet-view:hover {
    background: linear-gradient(135deg, #ff8c00 0%, #fd7e14 100%) !important;
    box-shadow: 
        0 15px 40px rgba(253, 126, 20, 0.4),
        0 8px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* Icon styling if present */
.view-toggle-btn .icon {
    font-size: 1.2rem !important;
    transition: transform 0.3s ease !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important;
}

.view-toggle-btn:hover .icon {
    transform: scale(1.15) rotate(5deg) !important;
}