@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  
html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}
  
body {
    background-color: #eaeaea;
    color: #333333;
    font-family: Poppins, sans-serif;
}
  
/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #4A90E2;
    color: white;
    padding: 16px 32px;
}
  
header h1 {
    font-size: 28px;
    font-weight: bold;
}
  
header button {
    width: 150px;
    background-color: white;
    color: #0c519f;
    border: none;
    padding: 8px 16px;
    margin-left: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
  
header button:hover {
    background-color: #E0E4E8;
}
  
/* Search and Filter Section */
#searchFilter {
    padding: 16px 32px;
    margin-top: 16px;
}
  
#searchBar {
    padding: 8px;
    border: 1px solid #D0D5DA;
    border-radius: 4px;
    width: 60%;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
  
/* Event List View */
#eventListView {
    padding: 16px 32px;
    max-height: 80vh;
    overflow-y: auto; /* Enable scrolling within the event list */
}
  
.event-card {
    background-color: #ffffff;
    border: 1px solid #E0E4E8;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

#noEvents {
    display: block;
    text-align: center;
    margin: 100px 0;
}
  
.event-card h3 {
    color: #4A90E2;
    margin-bottom: 8px;
}
  
.event-card .editBtn,
.event-card .deleteBtn {
    background-color: #4A90E2;
    color: white;
    border: none;
    padding: 3px 12px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 16px;
}
  
.event-card .deleteBtn {
    background-color: #F15B5B;
}
  
.event-card .editBtn:hover {
    background-color: #357ABD;
}
  
.event-card .deleteBtn:hover {
    background-color: #D14242;
}
  
/* Calendar View */
#calendarView {
    display: none;
    padding: 0 32px;
}
  
#calendarGrid {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 columns for days of the week */
    gap: 5px;
    padding: 10px;
    padding-top: 16px;
    overflow: hidden;
    max-height: 600px;
}
  
.calendar-cell {
    height: 75px;
    background-color: #FFFFFF;
    border: 1px solid #E0E4E8;
    padding: 16px;
    border-radius: 8px;
    text-align: center;
    position: relative;
}
  
.calendar-cell .date-number {
    font-weight: bold;
    color: #4A90E2;
    margin-bottom: 8px;
}

.calendar-event.past-event {
    border: 3px solid #4A90E2;
    opacity: 0.5;
    padding: 5px;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 30px;
    padding-top: 16px;
    color: #4A90E2;
    font-weight: bold;
    margin-bottom: 8px;
    margin-right: 10px;
}
 
#prevMonthBtn,
#nextMonthBtn {
    background-color: #4A90E2;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
  
#prevMonthBtn:hover,
#nextMonthBtn:hover {
    background-color: #357ABD;
}
  
/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent overlay for the entire body */
  z-index: 1000; /* Makes sure the overlay is above the body content */
  justify-content: center;
  align-items: center;
}

body.modal-open {
  background-color: rgba(0, 0, 0, 0.1); /* Darkens the background behind the modal */
  overflow: hidden; /* Prevents scrolling while modal is open */
}

.modal-open {
  overflow: hidden;
}
  
.modal-content {
  background-color: #FFFFFF;
  padding: 32px;
  border-radius: 8px;
  width: 100%;
  max-width: 500px;  /* Limit the width of the modal */
  box-sizing: border-box;  /* Ensures padding doesn't affect the width */
}
  
.modal-content h2 {
    color: #4A90E2;
    margin-bottom: 16px;
}
  
.modal-content label {
    display: block;
    margin: 8px 0 3px;
    font-weight: bold;
}
  
.modal-content input[type="text"],
.modal-content input[type="date"],
.modal-content input[type="time"],
.modal-content textarea,
.modal-content select {
    width: 100%;
    padding: 8px;
    margin-bottom: 16px;
    border: 1px solid #D0D5DA;
    border-radius: 4px;
}
  
#saveEventBtn {
    background-color: #4A90E2;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 8px;
}
  
#cancelModalBtn {
    background-color: #7B8EA0;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
}
  
.modal-content button:hover {
    background-color: #357ABD;
}
  
#cancelModalBtn:hover {
    background-color: #5F6C7A;
}
  
/* Footer */
footer {
    background-color: #4A90E2;
    color: white;
    text-align: center;
    padding: 8px;
    margin-top: auto;
}

/* Mobile responsiveness for calendar view */
@media only screen and (max-width: 768px) {
    #calendarGrid {
        grid-template-columns: repeat(7, 1fr); /* Ensure 7 columns are maintained */
        gap: 3px; /* Reduce gap to fit better on smaller screens */
    }
    .calendar-cell {
        height: 60px; /* Reduce cell height on smaller screens */
        padding: 8px 4px; /* Adjust padding */
        font-size: 12px; /* Reduce font size for better fit */
    }
    .modal {
        max-height: 70vh;  /* Default height of 70% of viewport height */
    }
    .modal-content {
        max-height: 100%;
    }
    body.modal-open {
        /* Maintain darkened background full height */
        background-color: rgba(0, 0, 0, 0.1);
        /* overflow: hidden;  */

    }
}

@media only screen and (max-width: 480px) {
    #calendarGrid {
        grid-template-columns: repeat(7, 1fr); /* Maintain 7 columns */
        gap: 2px; /* Further reduce gap on mobile */
        padding: 0 8px;
    }
    .calendar-cell {
        height: 50px; /* Further reduce height */
        padding: 4px 2px; /* Minimize padding */
        font-size: 10px; /* Smaller font size */
    }
    .calendar-days {
        position: relative;
        left: 20px;
        gap: 0;
        font-size: 12px; /* Adjust font size for days of the week */
    }
}