.App
  background-color #f3f6f9
  display flex
  flex-direction column
  justify-content space-between

.main-layout
  background-color #fff
  flex-direction row
  height calc(100vh - 90px)
  display flex

.calendar
  flex-grow 1
  height 100%
  overflow hidden

.calendarListHeader
  padding-top 10px
  display flex
  align-items center
  margin-left 25%

.sidebar
  border-right 2px solid #f3f4f6
  width 330px
  padding 16px 25px
  height 90vh
  flex-direction column
  overflow auto

.declined-event
  opacity 0.7

.needs-action-event
  opacity 0.7
  border dashed 1px #ffffff

.fc-event-main span,
.fc-daygrid-event div
  display block !important
  white-space nowrap !important
  overflow hidden !important
  text-overflow ellipsis !important

[data-theme="dark"] .fc-timegrid-slot::after
  border-top 1px dotted rgba(255, 255, 255, 0.2)

#calendar
  flex 1
  overflow hidden /* Important: let FullCalendar handle internal scroll */

/* Base container */
.fc-daygrid-day-top
  display flex
  flex-direction column
  align-items center
  padding 0.5rem 0
  font-family "Inter", sans-serif

/* sidebar*/
.sidebar-calendar
  width 280px
  background-color #fff
  border-radius 12px
  box-shadow 0 4px 12px rgba(0, 0, 0, 0.1)
  padding 20px
  display flex
  flex-direction column
  gap 30px
  font-family "Segoe UI", Tahoma, Geneva, Verdana, sans-serif

/* mini calendar style */
.react-calendar
  border none
  font-size 14px
  width 100%
  user-select none

/* selected day hover */
.react-calendar__tile
  transition background-color 0.3s ease, color 0.3s ease
  border none
  background-color white
  width 12px
  height 37.52px

.react-calendar__tile--active
  background-color rgb(255, 255, 255)

.today
  background orange !important
  color white

.selectedWeek
  background-color lightgrey

.react-calendar__month-view__days__day--neighboringMonth
  color gray

/* sidebar header */
.sidebar-calendar h2
  font-size 1.3rem
  font-weight 700
  color #333
  margin 0 0 10px 0

/* Calendar list */
.calendar-list
  list-style none
  padding 0
  margin 0
  display flex
  flex-direction column
  gap 15px

.calendar-list li
  display flex
  align-items center
  gap 10px
  font-weight 600
  color #444
  padding 10px 15px
  border-radius 10px
  transition background-color 0.2s ease
  cursor pointer

.event-dot
  margin-top 2px
  width 6px
  height 6px
  background-color #d93025
  border-radius 50%
  margin-left auto
  margin-right auto