/* Calendar.css */

input, textarea, select, button {
  border: none;
  outline: none;
  box-shadow: none;
  resize: none;
}
/* =========================
Start Fullcalendar overrides
=========================  */
:root {
  /* For events and projects */
  --fc-small-font-size: .9em; 
  /* Default text color */
  --fc-text-color: rgba(0, 28, 105, 0.993);
  /* For text in buttons */
  --fc-button-text-color: rgba(25, 25, 112, 1); 
  /* Today bg color */
  --fc-today-bg-color: rgba(180, 200, 220, 0.2); 
  /* Calendar border color */
  --fc-border-color: rgba(180, 200, 220, 0.5); 
  /* so far just affects today button */
  --fc-button-border-color: rgb(66, 113, 203); 
  /* button bg color */
  --fc-button-bg-color: rgba(255, 255, 255, 0.1); 
  /* Button bg color on hover */
  --fc-button-hover-bg-color: rgba(66, 113, 203, 0.2); 
  /* Button border color on hover */
  --fc-button-hover-border-color: rgb(66, 113, 255); 
  /* Active color for aria pressed */
  --fc-button-active-bg-color: rgba(66, 113, 203, 0.2); 
  /* Active border color for aria pressed */
  --fc-button-active-border-color: rgba(28, 129, 229, 0.5); 
  /* Event bg color, use !important so all events get styled */
  --fc-event-bg-color: rgba(66, 113, 203, 0.3); 
  /* Event border color, use !important so all events get styled */
  --fc-event-border-color: rgb(66, 113, 255); 
  /* Text color for events */
  --fc-event-text-color: rgba(25, 25, 112, 1); 
  /* Open events */
  --fc-event-open-bg-color: rgba(28, 129, 229, 0.2);
  /* Completed events */
  --fc-event-completed-bg-color: rgba(127, 127, 127, 0.3); 
  /* Bg color for active buttons */
  --fc-button-active-bg-color: rgba(66, 113, 203, 0.2); 
  /* For modal box */
  --new-event-button: rgba(66, 113, 203, 0.2); 
  /* For modal box */
  --new-event-button-hover: rgba(255, 255, 255, 0.1); 
}

/* style the title above the buttons */
.fc-toolbar {
  display: flex;
  flex-direction: column;
  /* Stack title and buttons vertically */
  align-items: center;
  /* Center all elements */
  padding-bottom: 10px;
  /* Adjust space below the toolbar */
}

/* Center and style the title */
.fc-toolbar-title {
  font-size: 24px;
  padding-bottom: 10px;
  /* Space between title and buttons */
  text-align: center;
  font-weight: bold;
  color: var(--fc-button-text-color);
}

/* Adjust the buttons layout */
.fc-toolbar-chunk {
  display: flex;
  justify-content: center;
}

/* Apply button styles */
.fc-button-group .fc-button {
  border-radius: 15px;
  /* Full rounding for all buttons */
  margin: 5px 0;
  /* Add horizontal gap between buttons */
  padding: 5px 25px;
  font-size: 1em
}

/* Optional: Adjust vertical alignment and spacing if necessary */
.fc-toolbar-chunk {
  display: flex;
  gap: 10px;
  /* Adds spacing between button groups */
}

/* Add margin to the header cells */
.fc-col-header-cell .fc-col-header-cell-cushion {
  margin: 15px 20px;
  text-align: center;
}

.fc-col-header-cell .fc-scrollgrid-sync-inner {
  font-size: 1em;
  background-color: rgba(28, 129, 229, 0.1);
  color: rgba(25, 25, 112);
  border-left: 2px solid rgba(25, 25, 112, 0.1); /* think about changing this */
}

/* Style for aria-pressed state */
.fc-button-active {
  background-color: rgba(66, 113, 255, 0.3) !important;
}

/*  Remove the syle ring when clicking on a button  */
.fc-button-group .fc-button:focus {
  box-shadow: none !important;
}

/* Hover effect for buttons */
.fc-button-primary {
  transition: background-color 0.5s ease;
}

/* Add this to stop bleeding in month view and style the event */
.cal-styling {
  white-space: nowrap; /* Prevent text from wrapping */
  overflow: hidden; /* Hide overflowing text */
  text-overflow: ellipsis; /* Add "..." to indicate truncated text */
  display: inline-block; /* Ensure truncation works properly */
  max-width: 100%; /* Prevent text from exceeding its container */
  font-size: .9em;
  padding-left: .2em;
  padding-top: .2em;
}

/* =======================
End Fullcalendar overrides
======================== */

/* ================== 
  Styling the modals
 ================== */
/* Add some padding to the main content to avoid being hidden by the navbar */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  /* Semi-transparent background */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  /* Ensure it sits behind the modal but above other content */
}

.modal {
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0px 4px 8px rgba(0, 0, 255, 0.3);
  border-radius: 10px;
  z-index: 1000;
}

/* Adding padding here stops modal from closing on edge click */
.modal-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 20px;
  color: var(--fc-button-text-color);
}
.modal-content h2 {
  margin-bottom: 25px;
}

.modal-content button {
  background-color: var(--new-event-button);
  border: 1px solid var(--fc-button-border-color);
  color: var(--fc-button-text-color);
  padding: 10px;
  cursor: pointer;
  border-radius: 4px;
  margin-bottom: 5px;
  transition: background-color 0.3s ease,
    border-color 0.3s ease;
}

.modal-content button:hover, .modal-content button:focus {
  background-color: var(--new-event-button-hover);
}
.modal-content .delete-button:hover {
  border-color: #c9302c;
  color: #c9302c;
  font-weight: bold;
}
.modal-content input, .modal-content textarea {
  border: 1px solid rgba(66, 113, 203, 0.5);
  color: rgb(66, 113, 203);
  font-size: 1.1em;
  padding: 5px;
  transition: border-color 0.5s ease;
}
.modal-content input:focus, .modal-content textarea:focus {
  border: 1px solid var(--fc-button-border-color);
  color: darkblue;
  font-size: 1.1em;
}
.modal-contant input::placeholder,
.modal-content textarea::placeholder {
  color: var(--fc-text-color);
  font-size: 1em;
}

/* styling for input field errors */
input.input-error {
  border: 1px solid red;
}

.error-text {
  color: red;
  font-size: 0.9rem;
  margin-top: 0.2rem;
}

.saved-message {
  color: purple;
}

/* ---------------------------
Styling the Calendar search bar
---------------------------- */

.search-container {
  margin: 0 auto;
  margin-bottom: 20px;
  width: 300px;
  display: flex;
  justify-content: center;
  position: relative;
  /* Ensure the results box stays within the container */
}

.search-container input {
  padding: 8px;
  font-size: 16px;
  border: 1px solid rgba(66, 113, 203, 0.5);
  border-radius: 5px;
  width: 100%;
  color: rgb(33, 57, 102);
  transition: border-color 0.5s ease;
}
.search-container input:focus {
  border-color: var(--fc-button-border-color);
  /* Darker shade of rgb(66, 113, 203) */
}
.search-container input::placeholder {
  color: var(--fc-text-color);
}

.search-results {
  position: absolute;
  /* Position the results below the input field */
  top: 100%;
  /* Position just below the input */
  left: 0;
  width: calc(100%);
  /* Make the width match the input field */
  max-height: 300px;
  /* Limit max height */
  background-color: rgb(237, 246, 255);
  border: 1px solid var(--fc-button-border-color);
  border-radius: 5px;
  overflow-y: auto;
  /* Enable scroll if results are too many */
  z-index: 101;
  /* Ensure it stays above other content */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.search-result-item {
  padding: 10px;
  border-bottom: 1px solid rgba(66, 113, 203, 0.3);
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.search-result-item:last-child {
  border-bottom: none;
  /* Remove the bottom border for the last item */
}

.search-result-item:hover {
  background-color: var(--fc-button-hover-bg-color);
}

.search-results:empty {
  display: none;
}

/* ################################
End styling the Calendar search bar 
################################# */


/* completed tasks and projects */
.open-task {
  background-color: var(--fc-event-open-bg-color);
  color: var(--fc-text-color);
}

.completed-task {
  background-color: var(--fc-event-completed-bg-color);
  color: var(--fc-text-color);
  border: 1px solid red;
}

.completed-project {
  background-color: var(--fc-event-completed-bg-color);
  color: var(--fc-text-color);
  border: 1px solid red;
}

.open-project {
  background-color: var(--fc-event-open-bg-color);
  color: var(--fc-text-color);
}

/* Style the button group */
.fc-button {
  border-radius: 10px;
}

/* ##########################################
Create the cursor when clicking into day view
########################################### */

/* Month view: cursor pointer on day numbers */
.fc-dayGridMonth-view .fc-daygrid-day-number {
  cursor: pointer;
}

/* Week view: cursor pointer on day headers */
.fc-timeGridWeek-view .fc-col-header-cell-cushion {
  cursor: pointer;
}

/* 4-Day view: cursor pointer on day headers */
.fc-timeGridFourDay-view .fc-col-header-cell-cushion {
  cursor: pointer;
}

/* Ensure no pointer cursor in day view */
.fc-timeGridDay-view .fc-col-header-cell-cushion {
  cursor: default;
}

/* ###############################
       End curson styling
############################### */

/* ======================
My Tippy Themes not working. Will come back to it late
======================= */
.tippy-box[data-theme~="mylight"] {
  background-color: rgba(255, 255, 255, 0.5);
  color: green;
  border: 1px solid var(--fc-event-border-color);
  box-shadow: 0 0 20px 4px rgba(154, 161, 177, .15), 0 4px 80px -8px rgba(36, 40, 47, .25), 0 4px 4px -2px rgba(91, 94, 105, .15);
}

.tippy-box[data-theme~=mylight][data-placement^=top]>.tippy-arrow:before {
  border-left-color: red; 
  background: red;
}

.tippy-box[data-theme~=mylight]>.tippy-backdrop {
  background-color: #fff
}