body {
    font-family: Arial, sans-serif;
    margin: 20px;
  
    color: #333;
}
.calendar-container {
    max-width: 1000px; /* Adjusted for a very narrow, column-based view */
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
    text-align: center;
    color: #0056b3;
    margin-bottom: 30px;
}
.year-navigation {
    text-align: center;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.year-navigation button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px; /* Slightly smaller padding */
    margin: 0 5px; /* Reduced margin */
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em; /* Smaller font */
}
.year-navigation button:hover {
    background-color: #0056b3;
}
.month.hidden {
    display: none;
}
.month h2 {
    background-color: #e2e6ea;
    color: #333;
    padding: 10px;
    text-align: center;
    margin: 0;
    font-size: 1.2em;
}

/* --- New/Modified Styles for Weekly and Daily Column Display --- */

.weeks-container {
    display: flex;
    flex-direction: column; /* Stacks weeks vertically */
    padding: 10px 0; /* Padding around the stacked weeks */
}

.week {
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 15px; /* Space between each week */
    background-color: #f9f9f9;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    overflow: hidden; /* Ensures borders are contained */
}

.week-header {
    background-color: #cce5ff; /* Lighter blue for week header */
    color: #004085;
    padding: 8px 10px;
    font-weight: bold;
    border-bottom: 1px solid #b8daff;
    text-align: center;
    font-size: 1em;
}

.week-days-column {
    display: flex;
    flex-direction: column; /* **Key change: Stacks days within the week vertically** */
}

.day {
    display: flex;
    align-items: flex-start; /* Align content to the top left */
    padding: 8px 10px;
    min-height: 40px; /* Min height for each day entry */
    border-bottom: 1px solid #eee; /* Separator between days */
}
.day:last-child {
    border-bottom: none; /* No border for the last day of the week */
}

.empty-day {
    background-color: #f0f0f0;
    color: #aaa;
    font-style: italic;
    padding: 8px 10px; /* Ensure empty days also have padding */
    min-height: 40px;
    border-bottom: 1px solid #eee;
}

.day-content {
    display: flex;
    flex-direction: column; /* Stack day number and events */
    align-items: flex-start;
    width: 100%; /* Take full width */
}

.day-label {
    font-weight: bold;
    margin-right: 8px; /* Space between day name and number */
    width: 50px; /* Fixed width for day label */
    flex-shrink: 0; /* Prevent label from shrinking */
}

.day-number {
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 3px;
    display: inline-block; /* Allow day-label next to it */
}

.event {
    font-size: 0.8em;
    background-color: green;
    color: #0c5460;
    text-align: center;
text-align: center;
    padding: 2px 5px;
    border-radius: 3px;
    margin-top: 3px;
    white-space: normal; /* Allow text to wrap within the narrow column */
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
    width: 100%; /* Take full width of its container */
    box-sizing: border-box; /* Include padding and border in the width */
}
.event:hover {
    background-color: green;
}
.event a {
    color: yellow;
    text-decoration: none;
}
.event a:hover {
    text-decoration: underline;
}
.events {
    font-size: 0.8em;
    background-color: rgb(223, 13, 223);
    color: #0c5460;
    text-align: center;
text-align: center;
    padding: 2px 5px;
    border-radius: 3px;
    margin-top: 3px;
    white-space: normal; /* Allow text to wrap within the narrow column */
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
    width: 100%; /* Take full width of its container */
    box-sizing: border-box; /* Include padding and border in the width */
}
.events:hover {
    background-color: rgb(211, 3, 211);
}
.events a {
    color: yellow;
    text-decoration: none;
}
.events a:hover {
    text-decoration: underline;
}