/* css/components/_calendar.css */

/* --- Calendar Specific Styles --- */

#calendarContainer {
    display: flex;
    /* Removed flex-grow here to allow explicit height or content-driven height if desired later */
}

#calendarGrid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 1px solid var(--border-color-medium); /* Main border for the whole calendar grid */
    border-radius: var(--radius-lg); /* Rounded corners for the whole calendar */
    overflow: hidden; /* Ensures child borders and backgrounds don't overflow */
    box-shadow: var(--shadow-md); /* Add shadow to the whole calendar */
    flex-grow: 1; /* Allow the grid to expand */
}

#calendarGrid .text-center.font-semibold.text-sm.text-gray-600.py-2 {
    /* Day of week headers */
    background-color: var(--color-gray-100);
    border-bottom: 1px solid var(--border-color-medium);
    border-right: 1px solid var(--border-color-light); /* Vertical dividers for headers */
    padding: 8px 0;
}
#calendarGrid .text-center.font-semibold.text-sm.text-gray-600.py-2:last-child {
    border-right: none; /* No right border on the last day header */
}

.calendar-day {
    min-height: 100px; /* Minimum height for each day cell */
    position: relative;
    border: 1px solid var(--border-color-light); /* Individual cell borders */
    border-top: none; /* Only draw bottom and left/right borders to prevent double borders */
    border-left: none;
    padding: 5px; /* Padding inside each day cell */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align content to the top-left */
    justify-content: flex-start; /* Align content to the top */
    background-color: var(--bg-color-card); /* White background for days */
    transition: background-color 0.15s ease-in-out; /* Smooth hover effect */
}

.calendar-day:nth-child(7n+1) { /* First column (Sunday) - add left border */
    border-left: 1px solid var(--border-color-light);
}

/* Remove bottom border for days in the last row */
#calendarGrid > :nth-last-child(-n+7) {
    border-bottom: none;
}


.calendar-day.empty-day {
    background-color: var(--color-gray-50); /* Lighter background for empty days */
    cursor: default;
}

.calendar-day.today {
    background-color: var(--color-blue-100); /* Highlight color for today */
    border-color: var(--color-primary-base); /* Stronger border for today */
    box-shadow: inset 0 0 0 1px var(--color-primary-base); /* Inner shadow to emphasize border */
}

.calendar-day .text-lg.font-bold.text-gray-800 {
    /* Day number styling */
    align-self: flex-end; /* Push day number to top-right corner */
    font-size: var(--font-size-lg);
    color: var(--color-gray-700);
    margin-bottom: 5px;
    line-height: 1; /* Adjust line height to prevent extra space */
}
.calendar-day.today .text-lg.font-bold.text-gray-800 {
    color: var(--color-primary-base); /* Day number color for today */
}


.events-list {
    width: 100%; /* Take full width of the cell */
    overflow-y: auto; /* Allow scrolling for many events */
    max-height: calc(100% - 30px); /* Adjust based on day number height */
    padding-right: 5px; /* Space for scrollbar */
}

.events-list::-webkit-scrollbar { width: 6px; }
.events-list::-webkit-scrollbar-track { background: var(--color-gray-600); border-radius: 3px; } /* Darker track */
.events-list::-webkit-scrollbar-thumb { background: var(--color-gray-400); border-radius: 3px; }
.events-list::-webkit-scrollbar-thumb:hover { background: var(--color-gray-300); } /* Lighter hover */


.event-item {
    font-size: var(--font-size-xs); /* Smaller font for events */
    padding: 2px 6px; /* Reduced padding for events */
    margin-bottom: 3px; /* Space between events */
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflow text */
    text-overflow: ellipsis; /* Show ellipsis for truncated text */
}

/* Responsive adjustments for Calendar Header (from original file) */
.calendar-header {
    flex-direction: column; /* Ensure vertical stacking on small screens too */
}

.calendar-navigation {
    flex-direction: row; /* Keep buttons side-by-side but centered */
    justify-content: space-around;
    width: 100%;
}