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

.main-layout
  display flex
  height calc(100dvh - 70px)

.main-layout.isInIframe
  margin-top 8px
  height calc(100vh - 8px)

.main-layout.calendar-layout
  background-color #fff
  flex-direction row

.calendar
  flex-grow 1
  height 100%
  overflow hidden

.main-layout.isInIframe .calendar
  display flex
  flex-direction column
  height 100%
  overflow hidden

.main-layout.isInIframe .fc
  flex 1
  min-height 0

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

.sidebar
  width 270px
  height 100%
  flex-direction column
  overflow-y: scroll
  overflow-x: hidden
  scrollbar-width: thin
  scrollbar-color: transparent transparent

.sidebar::-webkit-scrollbar
  width: 8px

.sidebar::-webkit-scrollbar-track
  background: transparent

.sidebar::-webkit-scrollbar-thumb
  background-color: rgba(0, 0, 0, 0.3)
  border-radius: 4px
  opacity: 0
  transition: opacity 0.3s ease

.sidebar:hover::-webkit-scrollbar-thumb
  background-color: rgba(0, 0, 0, 0.5)
  opacity: 1

.sidebar:hover
  scrollbar-color: rgba(0, 0, 0, 0.5) transparent

// .declined-event
//   opacity 0.7

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

[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
  gap 6px
  &--mobile
    flex-direction column-reverse !important

/* 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

/* 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

.weekSelector
  display flex
  flex-direction column
  align-items center