/* Workout Builder Mobile UI Fixes */

/* Fix 1: Center "Start Workout" text on mobile button */
@media (max-width: 768px) {
    .workout-actions .btn-primary {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        text-align: center !important;
        padding: 0.75rem 1.5rem !important;
        width: 100% !important;
    }
    
    .workout-actions .btn-primary i {
        margin-right: 0 !important;
    }
}

/* Fix 2: Fix "Complete Set" button visibility on mobile */
@media (max-width: 768px) {
    .workout-mode .btn-primary,
    .workout-mode button[onclick="completeSet()"] {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure complete set button container doesn't overflow */
    .workout-mode .exercise-item {
        padding: 0.5rem !important;
        overflow: visible !important;
    }
    
    .workout-mode .exercise-content {
        width: 100% !important;
        overflow: visible !important;
    }
}

/* Fix 3: Move "End Workout" button below exercises on mobile */
@media (max-width: 768px) {
    /* Create a flex container for workout mode */
    .workout-mode .workout-panel {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Give exercises container higher order to appear first */
    .workout-mode #workoutExercises {
        order: 1 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Move end workout button to bottom */
    .workout-mode .btn-danger[onclick="endWorkout()"] {
        order: 2 !important;
        width: 100% !important;
        margin-top: 1rem !important;
        margin-bottom: 2rem !important;
        padding: 0.75rem 1.5rem !important;
    }
    
    /* Ensure workout header stays at top */
    .workout-mode .workout-header {
        order: 0 !important;
    }
}

/* Fix 4: Ensure hamburger menu is visible on mobile - matching dashboard/history */
@media (max-width: 991px) {
    .mobile-nav-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Hide desktop nav on mobile */
    .workout-builder-page .desktop-nav {
        display: none !important;
    }
}

/* Additional mobile workout mode improvements */
@media (max-width: 768px) {
    /* Better spacing for workout exercises */
    .workout-mode .exercise-item {
        margin-bottom: 1rem !important;
        padding: 1rem !important;
        background: #f8f9fa !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
    
    /* Ensure workout timer is visible */
    .workout-mode .workout-header {
        position: sticky !important;
        top: 70px !important;
        z-index: 100 !important;
        background: white !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        margin-bottom: 1rem !important;
    }
    
    /* Better button spacing */
    .workout-mode button {
        min-height: 44px !important; /* iOS touch target */
    }
    
    /* Ensure proper spacing at bottom for end workout button */
    .workout-mode {
        padding-bottom: 100px !important;
    }
}

/* Fix button text centering globally */
.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0.5rem !important;
}

/* No additional mobile menu styles needed - navigation.css handles everything */
/* The standard navigation.js and navigation.css already provide the functionality */