/* CALENDAR & MAIN LAYOUT                     */
/* Container grid, weekday headers, day cells,*/
/* appointment dots, holiday markers, lunar.  */

.calendar-container {
    display: flex;
    flex: 1;
    width: 100%;
    position: relative;
    overflow: hidden;
    min-height: 0;
}

/* CALENDAR SECTION */

.calendar-main {
    width: 56%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0.75rem;
    min-height: 0;
}

.calendar-weekdays-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0 6px;
    padding: 0 14px;
    background: #e8f5e9;
    color: green;
    font-weight: 700;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    border: 1px solid #2da84a;
    border-bottom: none;
}

.weekday-cell {
    padding: 0.5rem;
    text-align: center;
    border-right: none;
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    word-wrap: break-word;
    overflow: hidden;
}

.weekday-cell:last-child {
    border-right: none;
}

/* Calendar Body - Fixed height grid */
.calendar-body {
    flex: 1;
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    min-height: 0;
    background: white;
    border: 1px solid #2da84a;
    border-top: none;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    padding: 8px 0;
}

.calendar-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0 6px;
    padding: 0 14px;
}

.calendar-row:last-child {
    border-bottom: none;
}

/* DAY CELL */

.day-cell {
    padding: 0.75rem 0.5rem 0.5rem;
    background: white;
    border-radius: 12px;
    margin: 3px 2px;
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: background 0.2s ease;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.day-cell:hover {
    background: #f5f5f5;
    border-radius: 14px;
}

.day-cell.other-month {
    background: #fafafa;
    opacity: 0.6;
}

.day-cell.other-month .holiday-text,
.day-cell.other-month .buddhist-event-text {
    opacity: 1 !important;
    font-weight: 600 !important;
    color: #ff0000 !important;
}

.day-cell.other-month .day-number,
.day-cell.other-month .lunar-date {
    opacity: 0.5;
}

.day-cell.today {
    background: #90EE90 !important;
    font-weight: 600;
    border-radius: 14px;
}

.day-cell.selected {
    background: #e8f5e9 !important;
    box-shadow: inset 0 0 0 2px var(--calendar-green);
    border-radius: 14px;
}

/* Saturday (7th column) today cell: fully rounded like selected */
.calendar-row > .day-cell:nth-child(7).today {
    background: #90EE90 !important;
    border-radius: 14px;
}

.calendar-row > .day-cell:nth-child(7).today.selected {
    background: #e8f5e9 !important;
    box-shadow: inset 0 0 0 2px var(--calendar-green);
}

/* Sunday only (1st column) gets gray rounded box */

/* Sunday column: continuous gray, no gaps, no border-radius */

/* Sunday column: continuous gray, no border between cells, rounded corners for column and on hover/select */
.calendar-row > .day-cell:nth-child(1) {
    background: #ededed;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
    border-left: none;
    border-right: none;
}

/* Top left and bottom left rounded corners for first and last row */
.calendar-row:first-child > .day-cell:nth-child(1) {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.calendar-row:last-child > .day-cell:nth-child(1) {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Hovered cell: fully rounded, no gap */
.calendar-row > .day-cell:nth-child(1):hover {
    background: #e2e2e2;
    border-radius: 12px;
}

/* Cell directly ABOVE the hovered cell: round bottom corners + gap below */
.calendar-row:has(+ .calendar-row > .day-cell:nth-child(1):hover) > .day-cell:nth-child(1) {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Cell directly BELOW the hovered cell: round top corners + gap above */
.calendar-row:has(.day-cell:nth-child(1):hover) + .calendar-row > .day-cell:nth-child(1) {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

/* Selected cell: fully rounded with gap.
   The gap is a transparent BORDER, not `margin: 3px 0`. Margin sits outside the box, so
   selecting used to shrink the cell 139px -> 133px and drop it 3px — a jump the other six
   columns never make, because their margin is the same selected or not. A border is inside
   the border-box (box-sizing is global), so the cell keeps its height and its position, and
   background-clip lets the row show through the 3px exactly as the margin did.
   Radius is 15px so the PAINTED padding box still reads as the 12px used everywhere else. */
.calendar-row > .day-cell:nth-child(1).selected {
    background: #e8f5e9 !important;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 2px var(--calendar-green);
    border-radius: 15px;
    margin: 0;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
}

/* Cell above selected: round bottom corners */
.calendar-row:has(+ .calendar-row > .day-cell:nth-child(1).selected) > .day-cell:nth-child(1) {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Cell below selected: round top corners */
.calendar-row:has(.day-cell:nth-child(1).selected) + .calendar-row > .day-cell:nth-child(1) {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
/* Today in the Sunday column carries the same gap, so it takes the same treatment — with
   the old margin it was permanently 6px shorter than every other cell in its row. */
.calendar-row > .day-cell:nth-child(1).today {
    background: #90EE90 !important;
    background-clip: padding-box;
    border-radius: 15px;
    margin: 0;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
}

.calendar-row > .day-cell:nth-child(1).today.selected {
    background: #e8f5e9 !important;
    box-shadow: inset 0 0 0 2px var(--calendar-green);
}

/* Match weekend selected behavior for today's cell surround */
.calendar-row:has(+ .calendar-row > .day-cell:nth-child(1).today) > .day-cell:nth-child(1) {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.calendar-row:has(.day-cell:nth-child(1).today) + .calendar-row > .day-cell:nth-child(1) {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.day-header-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 0.2rem;
    gap: 4px;
}

.day-number {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
}

.day-cell.holiday .day-number {
    color: var(--holiday-red);
}

.buddhist-icon {
    width: 14px;
    height: 14px;
}

.lunar-date {
    font-size: 0.65rem;
    color: #555;
    margin-bottom: 0.1rem;
    font-weight: 500;
    text-align: center;
}

.day-info {
    font-size: 0.6rem;
    line-height: 1.1;
    margin-top: 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.holiday-text {
    color: var(--holiday-red);
    font-weight: 500;
}

.event-text {
    color: var(--event-blue);
    font-weight: 500;
}

.buddhist-event-text {
    color: #9933cc;
    font-weight: 500;
}

.special-day {
    color: #666;
    font-weight: 400;
}

.appointment-count {
    display: inline-block;
    background: var(--calendar-green);
    color: white;
    padding: 1px 5px;
    border-radius: 10px;
    font-size: 0.55rem;
    font-weight: 600;
    margin-top: 2px;
}