/* === Calendar Table Layout === */
.calendar-wrapper {
    /* overflow-x: auto; */ /* Enable horizontal scroll on small screens if needed (overridden in responsive) */
    /* -webkit-overflow-scrolling: touch; */
}
.calendar {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0; 
    table-layout: fixed; /* Fixed layout for equal-width columns */
    min-width: 600px; /* Minimum width for desktop */
}
.calendar th, .calendar td {
    border: 1px solid black; /* Calendar grid lines */
    padding: 8px; 
    text-align: center;
    vertical-align: top;
    /* height: 100px; */ /* Height can be overridden by responsive styles */
}

/* === Calendar Header Row === */
.calendar thead th {
    background-color: black;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold; 
    height: auto; 
    padding: 10px 8px;
    border: 1px solid black; /* Ensure header borders are black */
}

/* === Calendar Day Cells === */
.calendar tbody td {
     background-color: var(--white);
     color: var(--text-dark);
     border: 1px solid black;
     /* height: 100px; */ /* Height can be overridden */
}
.calendar .day-number {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    font-size: 0.9em;
    text-align: left; 
}

/* === Highlight for Today === */
.calendar td.today {
    /* No special background for the cell, just bold text */
    font-weight: bold;
}
.calendar td.today .day-number {
     background-color: var(--accent-color); /* Highlight today's date */
     color: var(--text-dark); 
     border-radius: 50%;
     width: 24px;
     height: 24px;
     line-height: 24px;
     display: inline-block;
     text-align: center;
     font-weight: 600;
     margin: 0 auto 5px 0; /* Center horizontally, keep left alignment */
}

/* === Other Month & Past Day Styling === */
/* 'other-month' = days from previous/next month in current grid; 'past-day' = days before today */
.calendar td.other-month .day-number,
.calendar td.past-day .day-number {
    color: #bbb;
    font-weight: normal;
}
.calendar td.other-month,
.calendar td.past-day {
    background-color: #f0f0f0; /* Light gray for non-current or past days */
    color: #bbb;
}
.calendar td.past-day a { 
     color: #bbb;
     pointer-events: none; 
     cursor: default;
     opacity: 0.6;
}

/* === Weekend Highlight (Saturday/Sunday) === */
.calendar tbody td:nth-child(6):not(.other-month):not(.past-day),
.calendar tbody td:nth-child(7):not(.other-month):not(.past-day) {
    background-color: var(--secondary-bg); /* Pastel background for weekends */
}

/* === Event Count and Icon Display in Cells === */
.calendar .event-display {
    display: flex;
    align-items: center;
    justify-content: flex-start; 
    gap: 5px; 
    margin-top: 5px;
    font-size: 0.9em;
}
.calendar .event-count {
    font-weight: 500;
}
.calendar .event-icon {
    display: inline-block;
    width: 1.1em; 
    height: 1.1em;
    line-height: 1;
}
.calendar .event-icon svg {
     width: 100%;
     height: 100%;
     stroke-width: 1.5;
}

/* === Event List Items in Calendar Cells === */
.calendar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.8em;
}
.calendar li {
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.calendar li a {
     color: var(--accent-hover);
     text-decoration: none;
}
.calendar li a:hover {
    text-decoration: underline;
}

/* === Calendar Navigation Buttons === */
.calendar-nav-btn {
    display: inline-flex; /* Center icon in button */
    align-items: center;
    justify-content: center;
    width: 44px; /* Button size */
    height: 44px;
    background-color: black;
    color: white; /* Fallback if SVG fails */
    border: none;
    border-radius: 50%; /* Circular button */
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-decoration: none; /* Remove underline from link */
}
.calendar-nav-btn svg {
    stroke: white; /* Arrow color */
    width: 1.4em;
    height: 1.4em;
    stroke-width: 2.5; /* Bolder arrow */
}
.calendar-nav-btn:hover {
    background-color: #333; /* Darker on hover */
}
/* Disabled state for navigation buttons */
.calendar-nav-btn.disabled {
    background-color: #666; /* Gray background */
    cursor: not-allowed;
    opacity: 0.6;
}
.calendar-nav-btn.disabled svg {
    stroke: #ccc; /* Lighter arrow for disabled */
}



table.calendar {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px; /* Space below header */
    table-layout: fixed; /* Equal column widths */
}

[data-theme="dark"] .calendar-nav-btn {
    background-color: #fff;
    color: #000;
}
[data-theme="dark"] .calendar-nav-btn svg {
    stroke: #000;
}

[data-theme="dark"] .calendar,
[data-theme="dark"] .calendar th,
[data-theme="dark"] .calendar thead th {
    background-color: black !important;
    color: white !important;
    border: 1px solid black !important;
}
[data-theme="dark"] .calendar td {
    background-color: #fff !important;
    color: #222 !important;
    border: 1px solid black !important;
}
[data-theme="dark"] .calendar td.other-month,
[data-theme="dark"] .calendar td.past-day {
    background-color: #f0f0f0 !important;
    color: #bbb !important;
}
[data-theme="dark"] .calendar tbody td:nth-child(6):not(.other-month):not(.past-day),
[data-theme="dark"] .calendar tbody td:nth-child(7):not(.other-month):not(.past-day) {
    background-color: #ffecd9 !important;
}
[data-theme="dark"] .calendar td.today .day-number {
    background-color: #AED9E0 !important;
    color: #5D5C61 !important;
}
[data-theme="dark"] .calendar .day-number {
    color: #222 !important;
}
[data-theme="dark"] .calendar li a {
    color: #357abd !important;
}

[data-theme="dark"] .calendar tr:first-child th,
[data-theme="dark"] .calendar tr:first-child td {
    border-top: 2px solid #fff !important;
}

[data-theme="dark"] .calendar tr th:first-child,
[data-theme="dark"] .calendar tr td:first-child {
    border-left: 2px solid #fff !important;
}
[data-theme="dark"] .calendar tr th:last-child,
[data-theme="dark"] .calendar tr td:last-child {
    border-right: 2px solid #fff !important;
}