diff --git a/src/components/CommunityPortal/Calendar/CommunityCalendar.jsx b/src/components/CommunityPortal/Calendar/CommunityCalendar.jsx
index ebd19e7180..94edd7b8eb 100644
--- a/src/components/CommunityPortal/Calendar/CommunityCalendar.jsx
+++ b/src/components/CommunityPortal/Calendar/CommunityCalendar.jsx
@@ -36,7 +36,6 @@ export default function CommunityCalendar() {
         setEvents(response.data.events || []);
       } catch (err) {
         setError('Failed to load events');
-        console.error('Error fetching calendar events:', err);
       } finally {
         setIsLoading(false);
       }
@@ -58,6 +57,7 @@ export default function CommunityCalendar() {
         description: event.description || `Join us for ${event.title}`,
         // Ensure location is present or default
         location: event.location || 'Online',
+        isOver: eventDate < new Date(),
       };
     });
   }, [events]);
@@ -634,7 +634,6 @@ export default function CommunityCalendar() {
                   {selectedEvent.status}
                 </span>
               </div>
-
               <div className={styles.eventDetailsGrid}>
                 {[
                   ['Type', selectedEvent.type],
@@ -656,12 +655,21 @@ export default function CommunityCalendar() {
             </div>
 
             <div className={styles.modalActions}>
-              <button type="button" className={styles.btnPrimary}>
-                Register for Event
-              </button>
-              <button type="button" className={styles.btnSecondary}>
-                Add to Calendar
-              </button>
+              {selectedEvent.isOver ? (
+                <button type="button" className={styles.btnDisabled} disabled>
+                  Completed
+                </button>
+              ) : (
+                <>
+                  <button type="button" className={styles.btnPrimary}>
+                    Register for Event
+                  </button>
+
+                  <button type="button" className={styles.btnSecondary}>
+                    Add to Calendar
+                  </button>
+                </>
+              )}
             </div>
           </div>
         </div>
diff --git a/src/components/CommunityPortal/Calendar/CommunityCalendar.module.css b/src/components/CommunityPortal/Calendar/CommunityCalendar.module.css
index dfe3b9b385..02a3be2641 100644
--- a/src/components/CommunityPortal/Calendar/CommunityCalendar.module.css
+++ b/src/components/CommunityPortal/Calendar/CommunityCalendar.module.css
@@ -70,7 +70,7 @@
 
 .reactCalendarDarkMode {
   background-color: #1b2a41;
-  color: #ffffff;
+  color: #fff;
   border: 1px solid #444;
 }
 
@@ -140,7 +140,7 @@
 
 .reactCalendar :global(.react-calendar__month-view__days__day) {
   height: 80px;
-  border: 1px solid #000000;
+  border: 1px solid #000;
   vertical-align: top;
   padding: 2px;
 }
@@ -148,7 +148,7 @@
 .reactCalendar :global(.react-calendar__navigation) {
   background-color: #f9f9f9;
   border-bottom: 1px solid #ddd;
-  margin-bottom: 0px !important;
+  margin-bottom: 0 !important;
 }
 
 .reactCalendar :global(.react-calendar__tile) {
@@ -165,7 +165,7 @@
 
 .reactCalendarDarkMode :global(.react-calendar__tile) {
   background: transparent;
-  color: #ffffff;
+  color: #fff;
 }
 
 .reactCalendar :global(.react-calendar__tile):hover {
@@ -190,16 +190,16 @@
 .reactCalendarDarkMode :global(.react-calendar__tile.selectedDate):hover {
   background-color: #1a2332 !important;
   border-color: #4a9eff;
-  color: #ffffff !important;
+  color: #fff !important;
 }
 
 .reactCalendarDarkMode :global(.react-calendar__tile.selectedDate):hover :global(abbr),
 .reactCalendarDarkMode :global(.react-calendar__tile.selectedDate):hover :global(span) {
-  color: #ffffff !important;
+  color: #fff !important;
   font-weight: 900 !important;
   font-size: 1.2em !important;
-  text-shadow: 0 0 8px rgba(255, 255, 255, 1), 0 0 10px rgba(255, 255, 255, 0.9),
-    0 2px 4px rgba(0, 0, 0, 1), 0 4px 8px rgba(0, 0, 0, 0.9) !important;
+  text-shadow: 0 0 8px rgb(255 255 255 / 100%), 0 0 10px rgb(255 255 255 / 90%),
+    0 2px 4px rgb(0 0 0 / 100%), 0 4px 8px rgb(0 0 0 / 90%) !important;
   filter: brightness(1.8) contrast(1.5) !important;
 }
 
@@ -219,17 +219,17 @@
   line-height: 1.1;
 }
 
+.reactCalendarDarkMode :global(.react-calendar__tile) .tileEvents {
+  color: #e2e8f0;
+}
+
 /* Ensure tileEvents text is readable on selected date */
 .reactCalendar :global(.react-calendar__tile.selectedDate) .tileEvents {
   color: #1a202c;
 }
 
-.reactCalendarDarkMode :global(.react-calendar__tile) .tileEvents {
-  color: #e2e8f0;
-}
-
 .reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) .tileEvents {
-  color: #ffffff;
+  color: #fff;
 }
 
 .reactCalendar .eventItem {
@@ -255,7 +255,7 @@
 
 /* Ensure event items are readable in dark mode */
 .reactCalendarDarkMode .eventItem {
-  color: #ffffff;
+  color: #fff;
   font-weight: 600;
 }
 
@@ -300,6 +300,17 @@
   color: #ffcdd2;
 }
 
+.overflowPopup .eventItem {
+  margin-bottom: 8px;
+  font-size: 0.9rem;
+  padding: 6px 10px;
+  border-radius: 6px;
+  color: #fff;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
 .reactCalendar .eventItem:hover {
   transform: scale(1.03);
 }
@@ -375,11 +386,11 @@
 }
 
 .reactCalendarDarkMode :global(.react-calendar__tile.hasEvents.selectedDate) :global(abbr) {
-  color: #ffffff !important;
+  color: #fff !important;
   font-weight: 900 !important;
   font-size: 1.1em !important;
-  text-shadow: 0 0 6px rgba(255, 255, 255, 1), 0 0 8px rgba(255, 255, 255, 0.8),
-    0 2px 4px rgba(0, 0, 0, 1), 0 4px 8px rgba(0, 0, 0, 0.8) !important;
+  text-shadow: 0 0 6px rgb(255 255 255 / 100%), 0 0 8px rgb(255 255 255 / 80%),
+    0 2px 4px rgb(0 0 0 / 100%), 0 4px 8px rgb(0 0 0 / 80%) !important;
   filter: brightness(1.5) contrast(1.3) !important;
 }
 
@@ -410,6 +421,18 @@
   align-items: flex-start;
 }
 
+.modalHeader h2 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #2d3748;
+}
+
+.calendarActivitySectionDarkMode h2 {
+  color: #fff;
+  margin-bottom: 10px;
+}
+
 .selectedDatePanelDarkMode .selectedDateHeader h2 {
   color: #f7fafc;
 }
@@ -436,9 +459,9 @@
 .selectedEventCard {
   border: 1px solid #e2e8f0;
   border-radius: 12px;
-  background-color: #ffffff;
+  background-color: #fff;
   padding: 16px 20px;
-  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
+  box-shadow: 0 4px 16px rgb(15 23 42 / 6%);
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
@@ -446,12 +469,12 @@
   background-color: #1f2937;
   border-color: #374151;
   color: #f9fafb;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 4px 16px rgb(0 0 0 / 40%);
 }
 
 .selectedEventCardActive {
   border-color: #3182ce;
-  box-shadow: 0 6px 20px rgba(49, 130, 206, 0.2);
+  box-shadow: 0 6px 20px rgb(49 130 206 / 20%);
 }
 
 .selectedEventHeader {
@@ -486,7 +509,7 @@
 .eventDetailButton {
   border: none;
   background-color: #1e40af;
-  color: #ffffff;
+  color: #fff;
   padding: 8px 14px;
   border-radius: 6px;
   font-size: 0.85rem;
@@ -532,22 +555,20 @@
 
 .eventModalOverlay {
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  inset: 0;
+  background-color: rgb(0 0 0 / 50%);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1000;
-  animation: fadeIn 0.2s ease-out;
+  animation: fade-in 0.2s ease-out;
 }
 
-@keyframes fadeIn {
+@keyframes fade-in {
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -556,21 +577,22 @@
 .eventModal {
   background: white;
   border-radius: 12px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 10px 40px rgb(0 0 0 / 20%);
   max-width: 500px;
   width: 90%;
   max-height: 80vh;
   overflow-y: auto;
-  animation: slideIn 0.3s ease-out;
+  animation: slide-in 0.3s ease-out;
   position: relative;
   z-index: 2;
 }
 
-@keyframes slideIn {
+@keyframes slide-in {
   from {
     opacity: 0;
     transform: translateY(-20px) scale(0.95);
   }
+
   to {
     opacity: 1;
     transform: translateY(0) scale(1);
@@ -581,7 +603,7 @@
   background: #1a202c;
   color: #e2e8f0;
   border: 1px solid #4a5568;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
+  box-shadow: 0 10px 40px rgb(0 0 0 / 60%);
 }
 
 .modalHeader {
@@ -598,15 +620,8 @@
   border-radius: 12px 12px 0 0;
 }
 
-.modalHeader h2 {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: #2d3748;
-}
-
 .eventModalDark .modalHeader h2 {
-  color: #ffffff;
+  color: #fff;
 }
 
 .modalClose {
@@ -636,12 +651,13 @@
 
 .eventModalDark .modalClose:hover {
   background-color: #4a5568;
-  color: #ffffff;
+  color: #fff;
 }
 
 .modalContent {
   padding: 20px 24px;
 }
+
 .eventModalDark .modalContent {
   background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
 }
@@ -667,6 +683,20 @@
   margin-bottom: 20px;
 }
 
+.eventDescription {
+  margin-bottom: 24px;
+}
+
+.eventDescription label {
+  display: block;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #718096;
+  margin-bottom: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
 .detailItem {
   display: flex;
   flex-direction: column;
@@ -692,21 +722,7 @@
 }
 
 .eventModalDark .detailItem span {
-  color: #ffffff;
-}
-
-.eventDescription {
-  margin-bottom: 24px;
-}
-
-.eventDescription label {
-  display: block;
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: #718096;
-  margin-bottom: 8px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
+  color: #fff;
 }
 
 .eventModalDark .eventDescription label {
@@ -720,6 +736,11 @@
   color: #4a5568;
 }
 
+.activityNoEventsMessage p {
+  margin: 0;
+  font-size: 1rem;
+}
+
 .eventModalDark .eventDescription p {
   color: #f7fafc;
 }
@@ -738,7 +759,8 @@
 }
 
 .btnPrimary,
-.btnSecondary {
+.btnSecondary,
+.btnDisabled {
   padding: 10px 20px;
   border: none;
   border-radius: 8px;
@@ -770,9 +792,15 @@
   transform: translateY(-1px);
 }
 
+.btnDisabled{
+  background-color: #c0c0c0;
+  color: white;
+  cursor: not-allowed;
+}
+
 .eventModalDark .btnSecondary {
   background-color: #4a5568;
-  color: #ffffff;
+  color: #fff;
   border-color: #718096;
 }
 
@@ -789,22 +817,25 @@
 
 /* Better dark mode contrast for all text elements */
 .eventModalDark * {
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  text-shadow: 0 1px 2px rgb(0 0 0 / 10%);
 }
 
 /* Responsive Design */
-@media (max-width: 768px) {
+@media (width <= 768px) {
   .eventModal {
     width: 95%;
     max-height: 90vh;
   }
+
   .eventDetailsGrid {
     grid-template-columns: 1fr;
     gap: 12px;
   }
+
   .modalActions {
     flex-direction: column;
   }
+
   .btnPrimary,
   .btnSecondary {
     width: 100%;
@@ -821,11 +852,6 @@
   color: #f7fafc;
 }
 
-.calendarActivitySectionDarkMode h2 {
-  color: #fff;
-  margin-bottom: 10px;
-}
-
 .calendarActivityList {
   list-style: none;
   padding: 0;
@@ -907,11 +933,6 @@
   color: #666;
 }
 
-.activityNoEventsMessage p {
-  margin: 0;
-  font-size: 1rem;
-}
-
 .calendarActivitySectionDarkMode .activityNoEventsMessage {
   color: #cbd5e0;
 }
@@ -942,169 +963,19 @@
   color: #fff !important;
 }
 
-/* Override for selected date - must be pure white with maximum visibility */
-.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) :global(abbr) {
-  color: #ffffff !important;
-  font-weight: 900 !important;
-  font-size: 1.1em !important;
-  text-shadow: 0 0 6px rgba(255, 255, 255, 1), 0 0 8px rgba(255, 255, 255, 0.8),
-    0 2px 4px rgba(0, 0, 0, 1), 0 4px 8px rgba(0, 0, 0, 0.8) !important;
-  -webkit-text-stroke: 0.5px rgba(255, 255, 255, 1);
-  filter: brightness(1.5) contrast(1.3) !important;
-  background-color: #0f172a !important;
-  padding: 2px 4px;
-  border-radius: 3px;
-}
-
-.reactCalendarDarkMode :global(.react-calendar__tile--active) {
-  background: #444 !important;
-  color: #fff !important;
-}
-
-.reactCalendarDarkMode :global(.react-calendar__tile--active) :global(abbr) {
-  color: #fff !important;
-}
-
-/* CRITICAL: Override react-calendar's default active/selected styles in dark mode - NEVER allow light background */
-.reactCalendarDarkMode :global(.react-calendar__tile--active.selectedDate),
-.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate.react-calendar__tile--active) {
-  background-color: #1a2332 !important;
-  color: #ffffff !important;
-}
-
-.reactCalendarDarkMode :global(.react-calendar__tile--active.selectedDate) :global(abbr),
-.reactCalendarDarkMode
-  :global(.react-calendar__tile.selectedDate.react-calendar__tile--active)
-  :global(abbr) {
-  color: #ffffff !important;
-  font-weight: 900 !important;
-  font-size: 1.2em !important;
-  text-shadow: 0 0 8px rgba(255, 255, 255, 1), 0 0 10px rgba(255, 255, 255, 0.9),
-    0 2px 4px rgba(0, 0, 0, 1), 0 4px 8px rgba(0, 0, 0, 0.9) !important;
-  filter: brightness(1.8) contrast(1.5) !important;
-}
-
-.reactCalendarDarkMode :global(.react-calendar__tile--now) :global(abbr) {
-  color: #fff !important;
-}
-.reactCalendarDarkMode :global(.react-calendar__navigation__label) {
-  color: #fff;
-}
-
-.reactCalendarDarkMode :global(.react-calendar__navigation__arrow) {
-  color: #fff;
-}
-
-.reactCalendarDarkMode :global(.react-calendar__navigation) {
-  background-color: #1b2a41;
-  border-bottom: 1px solid #444;
-}
-
-.reactCalendarDarkMode :global(.react-calendar__navigation button) {
-  color: #ffffff;
-}
-
-.reactCalendarDarkMode :global(.react-calendar__navigation button:enabled:hover),
-.reactCalendarDarkMode :global(.react-calendar__navigation button:enabled:focus) {
-  background-color: #2d3748;
-}
-
-.reactCalendarDarkMode :global(.react-calendar__month-view__weekdays__weekday) {
-  color: #fff;
-}
-
-.reactCalendarDarkMode :global(.react-calendar__month-view__weekdays__weekday) abbr {
-  color: #fff;
-  text-decoration: none;
-}
-
-.selectedDate {
-  box-shadow: inset 0 0 0 2px #3182ce;
-  border-radius: 8px;
-  background-color: #e6f2ff !important;
-}
-
-/* Override for dark mode - keep dark background, never light */
-.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) {
-  background-color: #1a2332 !important;
-  box-shadow: inset 0 0 0 2px #4a9eff !important;
-}
-
-/* Force dark blue text on selected date number in light mode - target the abbr element specifically */
-.reactCalendar :global(.react-calendar__tile.selectedDate) :global(abbr) {
-  color: #0d47a1 !important;
-  font-weight: 700 !important;
-}
-
-/* Also target any direct text content */
-.reactCalendar :global(.react-calendar__tile.selectedDate) {
-  color: #0d47a1 !important;
-}
-
-/* But don't override event item colors */
-.reactCalendar :global(.react-calendar__tile.selectedDate) .eventItem {
-  color: inherit;
-}
-
-/* Force bright white text on date number in dark mode - use maximum specificity with all variations */
-.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) :global(abbr),
-.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) :global(span),
-.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate),
-.reactCalendarDarkMode.reactCalendar :global(.react-calendar__tile.selectedDate) :global(abbr),
-.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate abbr),
-.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate span) {
-  color: #ffffff !important;
-  font-weight: 900 !important;
-  font-size: 1.2em !important;
-  text-shadow: 0 0 8px rgba(255, 255, 255, 1), 0 0 10px rgba(255, 255, 255, 0.9),
-    0 2px 4px rgba(0, 0, 0, 1), 0 4px 8px rgba(0, 0, 0, 0.9) !important;
-  -webkit-text-stroke: 0.6px rgba(255, 255, 255, 1);
-  filter: brightness(1.8) contrast(1.5) !important;
-}
-
-/* Target any nested elements with maximum brightness */
-.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) :global(abbr),
-.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) :global(button),
-.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) :global(div) {
-  color: #ffffff !important;
-  font-weight: 900 !important;
-  font-size: 1.2em !important;
-  text-shadow: 0 0 8px rgba(255, 255, 255, 1), 0 0 10px rgba(255, 255, 255, 0.9),
-    0 2px 4px rgba(0, 0, 0, 1), 0 4px 8px rgba(0, 0, 0, 0.9) !important;
-  filter: brightness(1.8) contrast(1.5) !important;
-}
-
-/* Ensure it works even with hover - make text even brighter */
-.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate):hover :global(abbr),
-.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate):hover,
-.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate):hover :global(span),
-.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate):hover :global(*) {
-  color: #ffffff !important;
-  font-weight: 900 !important;
-  background-color: #0f1f3a !important;
-  text-shadow: 0 0 6px rgba(255, 255, 255, 1), 0 0 8px rgba(255, 255, 255, 0.8),
-    0 2px 4px rgba(0, 0, 0, 1), 0 4px 8px rgba(0, 0, 0, 0.8) !important;
-  filter: brightness(1.5) contrast(1.3) !important;
-}
-
-/* But don't override event item colors in dark mode */
-.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) .eventItem {
-  color: inherit;
-}
-
 .overflowPopup {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: white;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 4px 20px rgb(0 0 0 / 30%);
   border-radius: 10px;
   z-index: 1500;
   width: 400px;
   max-height: 70vh;
   overflow-y: auto;
-  animation: fadeIn 0.2s ease-out;
+  animation: fade-in 0.2s ease-out;
 }
 
 .overflowPopupDark {
@@ -1131,20 +1002,10 @@
   border-bottom-color: #4a5568;
 }
 
-.overflowPopup .eventItem {
-  margin-bottom: 8px;
-  font-size: 0.9rem;
-  padding: 6px 10px;
-  border-radius: 6px;
-  color: #fff;
-  font-weight: 600;
-  cursor: pointer;
-  transition: transform 0.2s ease;
-}
-
 .overflowPopup .eventItem:hover {
   transform: translateY(-1px);
 }
+
 .detailLabel {
   font-size: 0.8rem;
   font-weight: 600;
@@ -1159,7 +1020,7 @@
 .weekGridContainer {
   display: flex;
   flex-direction: column;
-  background: #ffffff;
+  background: #fff;
   border: 1px solid #e2e8f0;
   border-radius: 12px;
   height: 700px;
@@ -1170,7 +1031,7 @@
 .weekGridBody {
   flex: 1;
   overflow-y: scroll;
-  background: #ffffff;
+  background: #fff;
 }
 
 .weekGridHeader {
@@ -1235,7 +1096,7 @@
   padding: 6px;
   font-size: 0.75rem;
   cursor: pointer;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
   margin-bottom: 4px;
 }
 
@@ -1267,7 +1128,7 @@
 }
 
 .dateLabelDark {
-  color: #ffffff;
+  color: #fff;
 }
 
 .hourRowDark {
@@ -1284,13 +1145,13 @@
 }
 
 .gridCellDark:hover {
-  background-color: rgba(255, 255, 255, 0.03);
+  background-color: rgb(255 255 255 / 3%);
 }
 
 .gridEventDark {
   background: #064e3b;
   border-left: 4px solid #10b981;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
 }
 
 .gridEventTitleDark {
@@ -1299,4 +1160,156 @@
 
 .gridEventTimeDark {
   color: #a7f3d0;
+}
+
+
+/* Override for selected date - must be pure white with maximum visibility */
+.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) :global(abbr) {
+  color: #fff !important;
+  font-weight: 900 !important;
+  font-size: 1.1em !important;
+  text-shadow: 0 0 6px rgb(255 255 255 / 100%), 0 0 8px rgb(255 255 255 / 80%),
+    0 2px 4px rgb(0 0 0 / 100%), 0 4px 8px rgb(0 0 0 / 80%) !important;
+  -webkit-text-stroke: 0.5px rgb(255 255 255 / 100%);
+  filter: brightness(1.5) contrast(1.3) !important;
+  background-color: #0f172a !important;
+  padding: 2px 4px;
+  border-radius: 3px;
+}
+
+.reactCalendarDarkMode :global(.react-calendar__tile--active) {
+  background: #444 !important;
+  color: #fff !important;
+}
+
+.reactCalendarDarkMode :global(.react-calendar__tile--active) :global(abbr) {
+  color: #fff !important;
+}
+
+/* CRITICAL: Override react-calendar's default active/selected styles in dark mode - NEVER allow light background */
+.reactCalendarDarkMode :global(.react-calendar__tile--active.selectedDate),
+.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate.react-calendar__tile--active) {
+  background-color: #1a2332 !important;
+  color: #fff !important;
+}
+
+.reactCalendarDarkMode :global(.react-calendar__tile--active.selectedDate) :global(abbr),
+.reactCalendarDarkMode
+  :global(.react-calendar__tile.selectedDate.react-calendar__tile--active)
+  :global(abbr) {
+  color: #fff !important;
+  font-weight: 900 !important;
+  font-size: 1.2em !important;
+  text-shadow: 0 0 8px rgb(255 255 255 / 100%), 0 0 10px rgb(255 255 255 / 90%),
+    0 2px 4px rgb(0 0 0 / 100%), 0 4px 8px rgb(0 0 0 / 90%) !important;
+  filter: brightness(1.8) contrast(1.5) !important;
+}
+
+.reactCalendarDarkMode :global(.react-calendar__tile--now) :global(abbr) {
+  color: #fff !important;
+}
+
+.reactCalendarDarkMode :global(.react-calendar__navigation__label) {
+  color: #fff;
+}
+
+.reactCalendarDarkMode :global(.react-calendar__navigation__arrow) {
+  color: #fff;
+}
+
+.reactCalendarDarkMode :global(.react-calendar__navigation) {
+  background-color: #1b2a41;
+  border-bottom: 1px solid #444;
+}
+
+.reactCalendarDarkMode :global(.react-calendar__navigation button) {
+  color: #fff;
+}
+
+.reactCalendarDarkMode :global(.react-calendar__navigation button:enabled:hover),
+.reactCalendarDarkMode :global(.react-calendar__navigation button:enabled:focus) {
+  background-color: #2d3748;
+}
+
+.reactCalendarDarkMode :global(.react-calendar__month-view__weekdays__weekday) {
+  color: #fff;
+}
+
+.reactCalendarDarkMode :global(.react-calendar__month-view__weekdays__weekday) abbr {
+  color: #fff;
+  text-decoration: none;
+}
+
+.selectedDate {
+  box-shadow: inset 0 0 0 2px #3182ce;
+  border-radius: 8px;
+  background-color: #e6f2ff !important;
+}
+
+/* Override for dark mode - keep dark background, never light */
+.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) {
+  background-color: #1a2332 !important;
+  box-shadow: inset 0 0 0 2px #4a9eff !important;
+}
+
+/* Force dark blue text on selected date number in light mode - target the abbr element specifically */
+.reactCalendar :global(.react-calendar__tile.selectedDate) :global(abbr) {
+  color: #0d47a1 !important;
+  font-weight: 700 !important;
+}
+
+/* Also target any direct text content */
+.reactCalendar :global(.react-calendar__tile.selectedDate) {
+  color: #0d47a1 !important;
+}
+
+/* But don't override event item colors */
+.reactCalendar :global(.react-calendar__tile.selectedDate) .eventItem {
+  color: inherit;
+}
+
+/* Force bright white text on date number in dark mode - use maximum specificity with all variations */
+.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) :global(abbr),
+.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) :global(span),
+.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate),
+.reactCalendarDarkMode.reactCalendar :global(.react-calendar__tile.selectedDate) :global(abbr),
+.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate abbr),
+.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate span) {
+  color: #fff !important;
+  font-weight: 900 !important;
+  font-size: 1.2em !important;
+  text-shadow: 0 0 8px rgb(255 255 255 / 100%), 0 0 10px rgb(255 255 255 / 90%),
+    0 2px 4px rgb(0 0 0 / 100%), 0 4px 8px rgb(0 0 0 / 90%) !important;
+  -webkit-text-stroke: 0.6px rgb(255 255 255 / 100%);
+  filter: brightness(1.8) contrast(1.5) !important;
+}
+
+/* Target any nested elements with maximum brightness */
+.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) :global(abbr),
+.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) :global(button),
+.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) :global(div) {
+  color: #fff !important;
+  font-weight: 900 !important;
+  font-size: 1.2em !important;
+  text-shadow: 0 0 8px rgb(255 255 255 / 100%), 0 0 10px rgb(255 255 255 / 90%),
+    0 2px 4px rgb(0 0 0 / 100%), 0 4px 8px rgb(0 0 0 / 90%) !important;
+  filter: brightness(1.8) contrast(1.5) !important;
+}
+
+/* Ensure it works even with hover - make text even brighter */
+.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate):hover :global(abbr),
+.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate):hover,
+.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate):hover :global(span),
+.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate):hover :global(*) {
+  color: #fff !important;
+  font-weight: 900 !important;
+  background-color: #0f1f3a !important;
+  text-shadow: 0 0 6px rgb(255 255 255 / 100%), 0 0 8px rgb(255 255 255 / 80%),
+    0 2px 4px rgb(0 0 0 / 100%), 0 4px 8px rgb(0 0 0 / 80%) !important;
+  filter: brightness(1.5) contrast(1.3) !important;
+}
+
+/* But don't override event item colors in dark mode */
+.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) .eventItem {
+  color: inherit;
 }
\ No newline at end of file