/**
 * Styles for the calendar page.
 *
 * This CSS file contains styles for the calendar page of the application.
 * It sets the font family, margin, padding, display, flex direction, alignment,
 * and height for the body element.
 */
body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}

/**
 * 
 * This CSS code defines the styling for the background of a calendar.
 * 
 * CSS class: .background
 * 
 * Properties:
 * - width: Specifies the width of the background element to be 100% of its parent container.
 * - height: Specifies the height of the background element to be 100% of its parent container.
 * - position: Specifies the positioning of the background element as fixed, so it remains in a fixed position even when the page is scrolled.
 * - background-image: Specifies the URL of the background image to be "../assets/images/blueWaveBackground.jpeg".
 * - background-size: Specifies the size of the background image to cover the entire background element.
 * - filter: Applies a blur effect to the background element with a blur radius of 10 pixels.
 * - transform: Applies a scale transformation to the background element, increasing its size by 10% to remove any white frame around the image.
 * - z-index: Specifies the stacking order of the background element, placing it behind other elements with a z-index of -1.
 */
.background {
  width: 100%;
  height: 100%;
  position: fixed;
  background-image: url("../assets/images/blueWaveBackground.jpeg");
  background-size: cover;
  filter: blur(10px);
  transform: scale(1.1); /* removes white frame*/
  z-index: -1;
}

.header-title {
  text-align: center;
  margin: 20px 0;
  font-size: 2em;
  color: #333;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-container * {
  all: unset;
}

.header-container select {
  appearance: menulist;
}


#main-container {
  display: flex;
  width: 100%;
  max-width: 1200px;
  margin: 20px;
  gap: 20px;
}

#left-column {
  flex: 1;
  display: flex;
  width: 15%;
  flex-direction: column;
  gap: 20px;
  height: 70vh;
}

#today-section {
  height: 100%;
  flex: 1;
  padding: 20px;
  background-color: rgb(116, 203, 223, 0.80);
  border: 2px solid #74cbdf;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  height: 70vh; 
  overflow-y: auto;
}

#today-events {
  max-height: calc(70vh - 40px); 
  overflow-y: auto;
}

#calendar-app {
  flex: 2;
  max-width: 60%;
  height: 63.9vh;
  margin: 20px auto;
  padding: 20px;
  background-color: rgb(116, 203, 223, 0.80);
  border: 2px solid #74cbdf;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow:-y auto;
  overflow-x: hidden;
}

#calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 15pt;
}

#calendar-header h2 {
  margin: 0;
  font-size: 1em;
  color: #333;
}

.nav-button {
  background-color: rgba(32, 154, 182, 0.47);
  border: 2px solid #3e8d9f;
  color: white;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  font-size: 1em;
}

/**
 * 
 * This CSS code defines the styles for the view-selector and search-bar elements in a calendar.
 * 
 * The view-selector and search-bar elements have the following styles:
 * - Background color: rgba(32, 154, 182, 0.47)
 * - Text color: black
 * - Border: 2px solid #3e8d9f
 * - Border radius: 5px
 * - Padding: 10px
 * - Cursor: pointer
 * - Font size: 1em
 */
.view-selector,
#search-bar {
  background-color: rgba(32, 154, 182, 0.47);
  color: black;
  border: 2px solid #3e8d9f;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  font-size: 1em;
}

.view-selector:hover, #search-bar:hover, .add-button:hover, .nav-button:hover {
  background-color: rgba(32, 155, 182, 0.867);
}

#search-bar {
  width: 200px;
}

.calendar-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}

.day-header {
  padding: 10px;
  background-color: rgb(116, 203, 223, 0.80);
  border: 2px solid #3e8d9f;
  color: black;
  border-radius: 5px;
  font-size: 15pt;
}

#calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}

.day {
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 5px;
  background-color: #f9f9f9;
  cursor: pointer;
  transition: background-color 0.3s;
  overflow: hidden;
}

.day:hover {
  background-color: #007bff;
  color: white;
}

.add-button {
  background-color: rgba(32, 154, 182, 0.47);
  border: 2px solid #3e8d9f;
  color: white;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  font-size: 1em;
  margin-bottom: 10px;
  width: 100%;
}

.day.current-day {
  background-color: #cce5ff;
  border-color: #007bff;
  color: #333;
}

.event {
  background-color: #ffefc1;
  padding: 5px;
  border-radius: 3px;
  margin: 5px 5px 5px 5px;
  font-size: 0.8em;
  word-wrap: break-word; 
  word-break: break-word; 
  white-space: pre-wrap;
}

.event.personal {
  background-color: darkorange;
}

.event.work {
  background-color: brown;
}

.event.school {
  background-color: crimson;
}

.event.other {
  background-color: purple;
}

/**
 * Represents a modal element.
 *
 * Modals are used to display content on top of the current page. They are positioned
 * fixed and cover the entire viewport. The background color is set to a semi-transparent
 * black color to create an overlay effect.
 *
 * @class
 */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

#event-description {
  resize: none;
}

.save-button, .cancel-button {
  all: unset;
}

/**
 * 
 * This CSS code defines the styling for the modal content in a calendar.
 * 
 * The `.modal-content` class is used to style the background color, padding, border radius,
 * box shadow, width, max width, and display properties of the modal content.
 * 
 * - `background-color` sets the background color of the modal content to #fff (white).
 * - `padding` sets the padding of the modal content to 30px on the top and bottom, and 20px on the left and right.
 * - `border-radius` sets the border radius of the modal content to 10px, giving it rounded corners.
 * - `box-shadow` adds a box shadow to the modal content, creating a subtle shadow effect.
 * - `width` sets the width of the modal content to 90% of its parent container.
 * - `max-width` sets the maximum width of the modal content to 500px, ensuring it doesn't exceed a certain size.
 * - `display` sets the display property of the modal content to flex, allowing it to be centered horizontally.
 */
.modal-content {
  background-color: #fff;
  padding: 30px 20px 30px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 90%;
  max-width: 500px;
  display: flex;
  justify-content: center;
}

.form-group {
  margin-bottom: 15px;

}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  width: 100%;
}

/**
 * 
 * This CSS code defines the styling for form inputs, textareas, and select elements within a form-group class.
 * The elements will have a width of 100%, a padding of 10px, a 1px solid border with a border radius of 5px,
 * and a font size of 1em. The box-sizing property is set to border-box to include padding and border in the element's total width.
 */
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1em;
  box-sizing: border-box;
}

.save-button, .cancel-button, .task-delete-button {
  all: unset;
}

.button-container {
  display: flex;
  justify-content: space-between;
}

.save-button {
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 1em;
  margin-right: 10px;
}

.cancel-button {
  background-color: #727573;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 1em;
  margin-right: 10px;

}

.task-delete-button {
  /* float: right; */
  background-color: #df2d2d;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 1em;
}

.save-button:hover {
  background-color: #166027; 
}

.cancel-button:hover {
  background-color: #3c3e3c; 
}

.task-delete-button:hover {
  background-color: #ac2020;
}


#today-section {
  margin-top: 20px;
  padding: 20px;
  background-color: rgb(116, 203, 223, 0.60);
  border: 2px solid #74cbdf;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#today-events {
  max-height: 70vh;
  overflow-y: auto;
}

#today-events .event {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #f9f9f9;
  margin-bottom: 10px;
  position: relative;
}

/**
 * 
 * This CSS code defines the styles for the edit and delete buttons within the event element.
 * The buttons are positioned absolutely and have no background or border.
 * They have a cursor pointer and a font size of 0, making them invisible.
 */
.event .edit-button,
.event .delete-button {
  position: absolute;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0;
}

.event .edit-button img,
.event .delete-button img {
  width: 20px;
  height: 20px;
}

.event .edit-button {
  top: 10px;
  right: 10px;
}

.event .delete-button {
  bottom: 10px;
  right: 10px;
}

.results:hover {
  cursor:pointer;
  outline: 2px solid #74cbdf;
}

/**
 * 
 * This CSS code defines the styling for the category filter element in a calendar.
 * The category filter is a clickable element with a background color, border, and padding.
 * It has a specific font size and color, and a border radius to give it rounded corners.
 */
.category-filter {
  background-color: rgba(32, 154, 182, 0.47);
  color: black;
  border: 2px solid #3e8d9f;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  font-size: 1em;
}

.week-view .day {
  padding: 10px;
  transition: all 0.3s ease;
  height: 45vh;
}

.day .event-time {
  display: block;
  margin-top: 5px; 
  font-size: 0.8em; 
  color: #666; 
}

#day-view {
  display: none; 
  flex-direction: row;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}

.day-view-button-container {
  display: flex;
  flex-direction: column;
}

.hours-column {
  width: 50px;
  border-right: 1px solid #ddd;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.task-block {
  border-bottom: 1px solid #ddd;
  height: 80px;
  position: relative;
}

.tasks-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.hour-block {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #ddd;
  font-size: 0.6em;
}

#today-section h2 {
  text-align: center;
}

#today-events .event strong {
  display: block;
  text-align: center;
  margin-bottom: -45px;
} 

/**
 * 
 * This media query targets screens with a maximum width of 600 pixels.
 * It is used to apply specific styles to the calendar when viewed on smaller screens.
 */
@media only screen and (max-width: 600px) {
  #today-section {
    display: none;
  }

  #main-container {
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
  }

  #left-column {
    display: none;
  }

  #calendar-app {
    width: 90%;
    margin: 10px 0;
    height: auto;
    padding: 10px;
  }

  .day {
    padding: 5px;
    font-size: 0.8em;
  }

  .modal-content {
    width: 90%;
    display: flex;
    flex-direction: column;
    max-height: 90%;
  }

  #search-bar {
    width: 100%;
    margin-bottom: 10px;
  }

  .nav-button, .view-selector, .category-filter {
    width: 100%;
    margin-bottom: 10px;
  }

  .calendar-header, #calendar-grid {
    gap: 5px;
    font-size: 11pt;
  }

  #calendar-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11pt;
  }

  .day-header, .day {
    border-radius: 3px;
    font-size: 0.375em;
    padding: 5px;
  }

  .event {
    font-size: 0.7em;
    padding: 3px;
    margin: 3px 0;
  }

  .event .edit-button, .event .delete-button {
    font-size: 0.7em;
    padding: 3px 5px;
  }

}