refactor(frontend): simplify booking forms and convert to modals

- Simplify BookingForm: remove recurring bookings, templates, and attachments
- Replace datetime-local with separate date/time inputs for better UX
- Convert inline forms to modals (Admin spaces, Users, SpaceDetail)
- Unify Create and Edit booking forms with identical styling and structure
- Add Space field to Edit modal (read-only)
- Fix calendar initial load and set week start to Monday
- Translate all form labels and messages to Romanian

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

frontend/src/views/SpaceDetail.vue

@@ -61,7 +61,7 @@
               d="M12 6v6m0 0v6m0-6h6m-6 0H6"
             />
           </svg>
-          Reserve Space
+          {{ showBookingForm ? 'Cancel Reservation' : 'Reserve Space' }}
         </button>
       </div>
 
@@ -75,7 +75,19 @@
       <div class="card calendar-card">
         <h3>Availability Calendar</h3>
         <p class="calendar-subtitle">View existing bookings and available time slots</p>
-        <SpaceCalendar :space-id="space.id" />
+        <SpaceCalendar ref="calendarRef" :space-id="space.id" />
+      </div>
+    </div>
+
+    <!-- Booking Modal -->
+    <div v-if="showBookingForm && space" class="modal" @click.self="closeBookingModal">
+      <div class="modal-content">
+        <h3>Create Booking</h3>
+        <BookingForm
+          :space-id="space.id"
+          @submit="handleBookingSubmit"
+          @cancel="closeBookingModal"
+        />
       </div>
     </div>
   </div>
@@ -83,17 +95,19 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 import { spacesApi, handleApiError } from '@/services/api'
 import SpaceCalendar from '@/components/SpaceCalendar.vue'
+import BookingForm from '@/components/BookingForm.vue'
 import type { Space } from '@/types'
 
 const route = useRoute()
-const router = useRouter()
 
 const space = ref<Space | null>(null)
 const loading = ref(true)
 const error = ref('')
+const showBookingForm = ref(false)
+const calendarRef = ref<InstanceType<typeof SpaceCalendar> | null>(null)
 
 // Format space type for display
 const formatType = (type: string): string => {
@@ -136,12 +150,18 @@ const loadSpace = async () => {
 
 // Handle reserve button click
 const handleReserve = () => {
-  // Placeholder for US-004d: Redirect to booking creation page
-  // For now, navigate to a placeholder route
-  router.push({
-    path: '/booking/new',
-    query: { space: space.value?.id }
-  })
+  showBookingForm.value = !showBookingForm.value
+}
+
+// Close booking modal
+const closeBookingModal = () => {
+  showBookingForm.value = false
+}
+
+// Handle booking form submit
+const handleBookingSubmit = () => {
+  showBookingForm.value = false
+  calendarRef.value?.refresh()
 }
 
 onMounted(() => {
@@ -364,6 +384,11 @@ onMounted(() => {
   line-height: 1.6;
 }
 
+/* Booking Card */
+.booking-card h3 {
+  margin-bottom: 16px;
+}
+
 /* Calendar Card */
 .calendar-subtitle {
   color: #6b7280;
@@ -371,6 +396,36 @@ onMounted(() => {
   margin-bottom: 20px;
 }
 
+/* Modal */
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 8px;
+  padding: 24px;
+  max-width: 600px;
+  width: 90%;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.modal-content h3 {
+  margin-top: 0;
+  margin-bottom: 20px;
+}
+
 /* Responsive */
 @media (max-width: 768px) {
   .space-header {