/* * 07_calendar.css 
 * Contains: All styles for the FullCalendar page
 */

#calendarPageContainer {
    max-width: 1200px; 
    margin: 0 auto;    

}

.calendar-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr; 
    align-items: center;
    margin-bottom: 1.5rem; 
    width: 100%;
}

.calendar-header h1 {
    grid-column: 2; /* Force the H1 into the center column */
    margin: 0;      
    justify-self: center; /* Explicitly center it in its column */
}

.calendar-controls-container {
    display: flex;
    align-items: center; 
    gap: 1.25rem; 
}

.back-link { 
    grid-column: 1;      /* <-- ADD THIS LINE */
    justify-self: start; /* <-- ADD THIS LINE */
    
    /* (Your existing styles below) */
    display: inline-flex; 
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap; 
	color: white; 
}


.calendar-controls-container #calendar {
    flex: 1; 
}

/* 1. Style the Day Headers (e.g., "November 1, 2025") */
.fc-list-day > * { 
    background-color: #ffff !important; 
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid #0a756b !important; 
}

/* 2. Style the Day Header Text */
.fc-list-day-text { 
    color: #f3d448 !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
}

.fc-list-day-side-text { 
    color: #e0f2f1 !important; 
    font-size: 1rem !important;
    font-weight: 400 !important;
}

.fc {
    --fc-list-event-hover-bg-color: #3c3c3c;
}

/* 3. Style the Event Rows for Readability */
.fc-list-event { 
    background-color: #242424 !important; 
    border-bottom: 1px solid #374151 !important; 
}

.fc-list-event:hover {
	background-color: #424242 !important; 
    border-bottom: 1px solid #374151 !important; 
}

.fc th {
    border-color: #374151 !important; 
    background-color: #242424 !important; 
}

/* 4. Style the Event Time */
.fc-list-event-time {
    color: #9ca3af !important; 
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    width: 75px !important; 
    padding-left: 10px !important;
}

/* 5. Style the Event Dot */
.fc-list-event-dot {
    width: 10px !important;
    height: 10px !important;
    border-color: #0d9488 !important; 
}

/* 6. Style the Event Title */
.fc-list-event-title a {
    color: #f7e17e !important; 
    font-size: 1rem !important;
    font-weight: 400 !important;
    transition: color 0.2s ease;
}

.fc-list-event-title a:hover {
    color: #9e9e9e !important;
}