/* Media Queries for Responsive Design */
@media screen and (max-width: 767px) {
  body {
    padding-top: 1rem;
    padding-bottom: 4rem;
  }

  .fc-header-toolbar .fc-button {
    font-size: 12px; /* Smaller text */
    padding: 50px 10; /* Smaller padding */
  }

  .fc-header-toolbar .fc-button-group {
    margin: 2px; /* Reduce space between buttons */
  }
  .fc-toolbar .fc-addButton {
    width: auto;
    margin-left: 15px;
    }   
  #calendar {
    width: auto;
    margin: 20px auto;
    padding: 10px;
    margin-top: 1rem; /* Space from the top */
    background-color: var(--calendar-bg-color);
    border-radius: var(--calendar-border-radius);
    box-shadow: var(--calendar-box-shadow);
    color: var(--calendar-text-color); /* Ensure text color adjusts to theme */
    height: 82vmax; /* Set a height for the calendar */
    z-index: 1;
  }
}

@media (min-width: 768px) {
  .main-container {
    padding-top: 70px; /* Adjust according to the height of top navbar */
    padding-bottom: 2rem;
  }
  /* Calendar Styling */
  #calendar {
    margin-top: 1rem; /* Space from the top */
    width: 100%; /* Make the calendar width responsive to viewport */
    max-width: 1400px; /* Set a maximum width */
    height: 85vh; /* Use viewport height for the calendar */
    max-height: 1040px; /* Set a maximum height */
    margin: 20px auto;
    padding: 10px;
    background-color: var(--calendar-bg-color);
    border-radius: var(--calendar-border-radius);
    box-shadow: var(--calendar-box-shadow);
    color: var(--calendar-text-color); /* Ensure text color adjusts to theme */
    overflow: hidden; /* Ensure no content overflows */
    z-index: 1;
  }
}
  /* Calendar Styling */
  #calendar {
    margin-top: 1rem; /* Space from the top */
    width: 100%; /* Make the calendar width responsive to viewport */
    max-width: 1400px; /* Set a maximum width */
    height: 85vh; /* Use viewport height for the calendar */
    max-height: 1040px; /* Set a maximum height */
    margin: 20px auto;
    padding: 10px;
    background-color: var(--calendar-bg-color);
    border-radius: var(--calendar-border-radius);
    box-shadow: var(--calendar-box-shadow);
    color: var(--calendar-text-color); /* Ensure text color adjusts to theme */
    overflow: hidden; /* Ensure no content overflows */
    z-index: 1;
  }
/* CSS Variables for Theme Styling */
:root {
  --calendar-bg-light: #f5f5f5;
  --calendar-bg-dark: #2b2a2a;
  --calendar-border-radius: 5px;
  --calendar-box-shadow-light: 0 0 2px rgba(0, 0, 0, 0.1);
  --calendar-box-shadow-dark: 0 0 2px rgba(255, 255, 255, 0.1);
  --calendar-text-color-light: #000000;
  --calendar-text-color-dark: #ffffff;
}

[data-bs-theme="light"] {
  --calendar-bg-color: var(--calendar-bg-light);
  --calendar-box-shadow: var(--calendar-box-shadow-light);
  --calendar-text-color: var(--calendar-text-color-light);
}

[data-bs-theme="dark"] {
  --calendar-bg-color: var(--calendar-bg-dark);
  --calendar-box-shadow: var(--calendar-box-shadow-dark);
  --calendar-text-color: var(--calendar-text-color-dark);
}



.fc-daygrid-day-top {
  height: 20px;
  opacity: 0.7;


  color: var(--fc-neutral-text-color);
}
.fc .fc-daygrid-week-number {
  background-color: var(--calendar-bg-color);
  color: var(--calendar-text-color);
  min-width: 1em;
  padding: 1px;
  font-size: 12px;
  position: absolute;
  text-align: center;
  top: 0px;
  z-index: 5;
}
.fc-daygrid-day-number {
  font-size: 12px;
}
.fc-daygrid-event-dot {
  border: calc(var(--fc-daygrid-event-dot-width) / 2) solid var(--fc-event-border-color);
  border-radius: calc(var(--fc-daygrid-event-dot-width) / 2);
  box-sizing: content-box;
  height: 0px;
  margin: 1px 1px;
  width: 0px;
}

/* FullCalendar Button Styling */
.fc-button-primary {
  background-color: #3788d8 !important;
  border: none !important;
  padding: 4px 8px !important; /* Same as Bootstrap's .btn-sm padding */
  font-size: 0.875rem !important; /* Same as Bootstrap's .btn-sm font size */
}


.fc-button-primary:hover {
  background-color: #007dfa !important;
}
.fc-customWeekNumber-button {
  background-color:gray !important;
  border: none !important;
}
/* Event List Styling */
.fc-list-table .fc-list-event-title {
  font-size: 14px; /* Adjust title size */
}

/* Event Colors */
.event-accepted {
  color: green;
  color: #f5f5f5;
}

.event-declined {
  background-color: red;
  color: #f5f5f5;
}

.event-none {
  background-color: orange;
  color: #f5f5f5;
}

/* Time Grid Event Styling */
.fc-timegrid-event {
  width: 95% !important;
  margin: 0 auto !important;
  white-space: normal;
  overflow: hidden;
  text-overflow: none;
  display: block;
}

/* General Event Styling */
.fc-event {
  display: block;
  white-space: normal;

  border: none;
  padding: 1px;
  cursor: pointer;
  font-size: 0.75em;
}
.fc-event-main {
  display: block;
  white-space: normal;
  border: none;
  padding: 0px;
  cursor: pointer;
  font-size: 0.90em;
}
.fc-event div {
  cursor: grab;
}

/* Day Grid Styling */
.fc .fc-daygrid-day-events {
  min-height: 100px;
  white-space: normal;
  height: auto;
}

/* Now Indicator Styling */
.fc-direction-ltr .fc-timegrid-now-indicator-arrow {
  left: 0;
  border-width: 5px 100px 0;
  opacity: 0.7;
  position: absolute;
  z-index: 2;
  margin-top: 0;
  border-style: solid;
  border-color: red; /* Adjust the color if needed */
}

.fc .fc-timegrid-now-indicator-line {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  margin-top: 0;
  border-style: solid;
  border-color: red; 
  border-width: 5px 0; /* width of the line */
  opacity: 0.5;
}

/* Today Button Styling */
.fc-today-button {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fc-today-button::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'16\' height=\'16\' fill=\'white\' class=\'bi bi-house-fill\' viewBox=\'0 0 16 16\'%3E%3Cpath d=\'M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293z\' fill=\'white\'/%3E%3Cpath d=\'m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293z\' fill=\'white\'/%3E%3C/svg%3E');
  background-size: contain;
  background-repeat: no-repeat;

}



/* Form Label Styling */
form label .required {
  color: red;
  margin-left: 5px; /* Adjust as needed for spacing */
}

/* Search Box Styling */
.search-box {
  display: inline-block;
  width: auto;
  margin-top: 5px;
  padding: 3px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  background-clip: padding-box;
  border: 0.5px solid #ced4da;
  appearance: none;
  border-radius: 5px;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* Quill Editor Styling */
#quillEditor {
  height: 7rem; /* Set the height you desire */
  width: 100%;   /* Adjust the width as needed */

}