fix(dashboard): sidebar theming, calendar reactivity, and booking filters

Fix multiple dashboard and UI issues:

Frontend fixes:
- Fix sidebar remaining dark on light theme (add proper light/dark CSS variables)
- Fix DashboardCalendar blank/not showing events (use watch + calendar API instead of computed options)
- Fix upcoming bookings to include active and recent past (last 7 days) bookings
- Improve sidebar collapsed state UX (stack footer buttons vertically, full width)

Details:
- theme.css: Add light sidebar colors (white bg) for :root, keep dark colors for [data-theme="dark"]
- DashboardCalendar: Add watch on events, use calendarRef to update events via removeAllEvents/addEventSource
- Dashboard: Change upcoming filter from "startDate >= now" to "endDate >= 7 days ago"
- AppSidebar: Stack footer-actions vertically when collapsed for better visibility

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

frontend/src/components/DashboardCalendar.vue

@@ -2,17 +2,17 @@
   <div class="dashboard-calendar">
     <div v-if="error" class="error">{{ error }}</div>
     <div v-if="loading" class="loading">Loading calendar...</div>
-    <FullCalendar v-show="!loading" :options="calendarOptions" />
+    <FullCalendar ref="calendarRef" v-show="!loading" :options="calendarOptions" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, watch, nextTick } from 'vue'
 import FullCalendar from '@fullcalendar/vue3'
 import dayGridPlugin from '@fullcalendar/daygrid'
 import timeGridPlugin from '@fullcalendar/timegrid'
 import interactionPlugin from '@fullcalendar/interaction'
-import type { CalendarOptions, EventInput, DatesSetArg } from '@fullcalendar/core'
+import type { CalendarOptions, EventInput, DatesSetArg, CalendarApi } from '@fullcalendar/core'
 import { bookingsApi, handleApiError } from '@/services/api'
 import { useAuthStore } from '@/stores/auth'
 import type { Booking } from '@/types'
@@ -23,6 +23,7 @@ const bookings = ref<Booking[]>([])
 const loading = ref(true)
 const initialLoad = ref(true)
 const error = ref('')
+const calendarRef = ref<InstanceType<typeof FullCalendar> | null>(null)
 
 const STATUS_COLORS: Record<string, string> = {
   pending: '#FFA500',
@@ -46,6 +47,17 @@ const events = computed<EventInput[]>(() => {
   }))
 })
 
+// Watch events and update FullCalendar
+watch(events, (newEvents) => {
+  nextTick(() => {
+    const calendarApi = calendarRef.value?.getApi()
+    if (calendarApi) {
+      calendarApi.removeAllEvents()
+      calendarApi.addEventSource(newEvents)
+    }
+  })
+})
+
 let currentStart: Date | null = null
 let currentEnd: Date | null = null
 
@@ -72,7 +84,7 @@ const handleDatesSet = (arg: DatesSetArg) => {
   loadBookings(arg.start, arg.end)
 }
 
-const calendarOptions = computed<CalendarOptions>(() => ({
+const calendarOptions: CalendarOptions = {
   plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
   initialView: 'dayGridMonth',
   headerToolbar: {
@@ -82,7 +94,7 @@ const calendarOptions = computed<CalendarOptions>(() => ({
   },
   timeZone: userTimezone.value,
   firstDay: 1,
-  events: events.value,
+  events: [],
   datesSet: handleDatesSet,
   editable: false,
   selectable: false,
@@ -98,7 +110,7 @@ const calendarOptions = computed<CalendarOptions>(() => ({
     minute: '2-digit',
     hour12: false
   }
-}))
+}
 
 const refresh = () => {
   if (currentStart && currentEnd) {