/* ==============================================
   Calendar Styles - VIEWPORT-FIT, NO SCROLL
   Family Planner Application
   ============================================== */

/* Month Section - fills available space */
.month-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    height: 100%;
}

.month-header {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-base);
    background: linear-gradient(90deg, rgba(255,255,255,0.9), transparent);
    border-left: 4px solid var(--accent-orange);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    flex-shrink: 0;
    text-shadow: var(--text-glow);
}

/* ==============================================
   Calendar Grid - FILLS AVAILABLE SPACE
   ============================================== */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: auto repeat(6, 1fr);
    border: 4px solid #B8860B;
    border-radius: var(--border-radius);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 30px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.5);
    flex: 1;
    min-height: 0;
    height: 100%;
    backdrop-filter: blur(8px);
}

.day-header-row {
    display: contents;
}

.day-header-cell {
    padding: var(--spacing-sm);
    text-align: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(240,240,240,0.95));
    border-bottom: 3px solid #B8860B;
    font-size: calc(var(--fs-xs) * 1.1);
    text-transform: uppercase;
    letter-spacing: clamp(0.5px, 0.1vmin, 1px);
    color: #333;
    font-weight: 800;
    min-width: 0;
    overflow: hidden;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

.day-header-cell.weekend {
    background: linear-gradient(180deg, rgba(255,245,242,0.95), rgba(255,232,224,0.95));
    color: #D84315;
    font-weight: 800;
}

/* ==============================================
   Calendar Day Cells - FLEX TO FIT
   ============================================== */
.calendar-day {
    min-width: 0;
    min-height: 0;
    padding: var(--cell-padding);
    border-right: 2px solid rgba(180, 160, 130, 0.5);
    border-bottom: 2px solid rgba(180, 160, 130, 0.5);
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.88);
}

.calendar-day:nth-child(7n) {
    border-right: none;
}

.calendar-day:hover {
    background: rgba(255, 250, 240, 0.95);
}

.calendar-day.other-month {
    background: rgba(240, 240, 240, 0.7);
    opacity: 0.6;
}

.calendar-day.today {
    background: rgba(255, 245, 242, 0.98);
    box-shadow: inset 0 0 0 3px var(--accent-orange);
}

.calendar-day.weekend {
    background: rgba(255, 251, 250, 0.9);
}

/* Day Header - Number and Moon Phase */
.day-header-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-sm);
    flex-shrink: 0;
}

.day-num {
    font-size: calc(var(--fs-base) * 1.15);
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1;
    text-shadow:
        0 1px 0 rgba(255,255,255,0.9),
        0 0 4px rgba(255,255,255,0.8);
}

.moon-phase {
    font-size: clamp(10px, 1.2vmin, 16px);
    opacity: 0.7;
    cursor: help;
    filter: grayscale(30%);
    transition: all 0.2s;
}

.moon-phase:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.3);
}

.calendar-day.today .day-num {
    background: var(--accent-orange);
    color: white;
    width: var(--day-num-size);
    height: var(--day-num-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: var(--fs-sm);
}

.calendar-day.other-month .day-num {
    color: var(--text-muted);
}

/* ==============================================
   Day Events Container - SCROLLABLE IF NEEDED
   ============================================== */
.day-events {
    display: flex;
    flex-direction: column;
    gap: clamp(1px, 0.2vmin, 4px);
    flex: 1;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}

/* Event Pills - BRIGHT & VISIBLE */
.event-pill {
    padding: var(--pill-padding-v) var(--pill-padding-h);
    padding-right: clamp(18px, 2vmin, 24px); /* Space for delete button */
    border-radius: clamp(4px, 0.5vmin, 8px);
    font-size: var(--pill-font);
    position: relative;
    font-weight: 700;
    color: white;
    min-width: 0;
    flex-shrink: 1;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.3) inset;
    border: 2px solid rgba(255,255,255,0.4);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 0 4px rgba(0,0,0,0.2);
    cursor: pointer;
    /* Text handling - truncate with ellipsis */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.event-pill.matt { background: linear-gradient(135deg, #2196F3, #1565C0); border-color: rgba(255,255,255,0.5); }
.event-pill.melanie { background: linear-gradient(135deg, #EC407A, #C2185B); border-color: rgba(255,255,255,0.5); }
.event-pill.liv { background: linear-gradient(135deg, #AB47BC, #7B1FA2); border-color: rgba(255,255,255,0.5); }
.event-pill.jane { background: linear-gradient(135deg, #FF7043, #E65100); border-color: rgba(255,255,255,0.5); }
.event-pill.family { background: linear-gradient(135deg, #66BB6A, #2E7D32); border-color: rgba(255,255,255,0.5); }

.event-pill:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    filter: brightness(1.15);
}

.event-pill .pill-delete {
    position: absolute;
    right: 1px;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(12px, 1.5vmin, 18px);
    height: clamp(12px, 1.5vmin, 18px);
    border-radius: 50%;
    background: rgba(0,0,0,0.3);
    color: white;
    border: none;
    cursor: pointer;
    font-size: clamp(8px, 1vmin, 12px);
    line-height: 1;
    text-align: center;
    opacity: 0;
    transition: opacity 0.15s;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-pill:hover .pill-delete {
    opacity: 1;
}

.event-pill .pill-delete:hover {
    background: rgba(0,0,0,0.6);
}

/* ==============================================
   Holiday Pills - FESTIVE & BRIGHT
   ============================================== */
.holiday-pill {
    padding: var(--pill-padding-v) var(--pill-padding-h);
    background: linear-gradient(135deg, #FFF8E1, #FFE082);
    border-radius: clamp(4px, 0.5vmin, 8px);
    font-size: var(--pill-font);
    font-weight: 800;
    color: #BF360C;
    display: flex;
    align-items: center;
    gap: clamp(2px, 0.3vmin, 6px);
    margin-bottom: clamp(1px, 0.2vmin, 4px);
    border: 2px solid #FFB300;
    flex-shrink: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 2px 8px rgba(255,152,0,0.4), 0 0 0 1px rgba(255,255,255,0.5) inset;
    text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}

.holiday-pill .emoji {
    font-size: var(--fs-sm);
    flex-shrink: 0;
}

/* Holiday-specific Colors */
.holiday-pill.christmas {
    background: linear-gradient(135deg, #C62828, #2E7D32) !important;
    color: white !important;
    border-color: #1B5E20 !important;
}

.holiday-pill.christmas-eve {
    background: linear-gradient(135deg, #2E7D32, #C62828) !important;
    color: white !important;
    border-color: #C62828 !important;
}

.holiday-pill.winter-solstice {
    background: linear-gradient(135deg, #E3F2FD, #B3E5FC) !important;
    color: #0277BD !important;
    border-color: #4FC3F7 !important;
}

.holiday-pill.new-years {
    background: linear-gradient(135deg, #FFD700, #FFA000) !important;
    color: #333 !important;
    border-color: #FFB300 !important;
}

.holiday-pill.valentines {
    background: linear-gradient(135deg, #F8BBD9, #F48FB1) !important;
    color: #880E4F !important;
    border-color: #EC407A !important;
}

.holiday-pill.halloween {
    background: linear-gradient(135deg, #FF9800, #E65100) !important;
    color: white !important;
    border-color: #BF360C !important;
}

.holiday-pill.thanksgiving {
    background: linear-gradient(135deg, #8D6E63, #D84315) !important;
    color: white !important;
    border-color: #BF360C !important;
}

.holiday-pill.easter {
    background: linear-gradient(135deg, #E1BEE7, #CE93D8) !important;
    color: #4A148C !important;
    border-color: #9C27B0 !important;
}

.holiday-pill.stpatricks {
    background: linear-gradient(135deg, #4CAF50, #2E7D32) !important;
    color: white !important;
    border-color: #1B5E20 !important;
}

.holiday-pill.july4th {
    background: linear-gradient(135deg, #1565C0, #C62828) !important;
    color: white !important;
    border-color: #0D47A1 !important;
}

.holiday-pill.hanukkah {
    background: linear-gradient(135deg, #1976D2, #64B5F6) !important;
    color: white !important;
    border-color: #1565C0 !important;
}

.holiday-pill.kwanzaa {
    background: linear-gradient(135deg, #D32F2F, #388E3C) !important;
    color: white !important;
    border-color: #1B5E20 !important;
}

.holiday-pill.mothers-day,
.holiday-pill.fathers-day {
    background: linear-gradient(135deg, #F8BBD9, #E1BEE7) !important;
    color: #880E4F !important;
    border-color: #EC407A !important;
}

.holiday-pill.memorial-day,
.holiday-pill.veterans-day,
.holiday-pill.labor-day {
    background: linear-gradient(135deg, #1565C0, #C62828) !important;
    color: white !important;
    border-color: #0D47A1 !important;
}

/* Lunar Phases - Full Moon */
.holiday-pill.full-moon {
    background: linear-gradient(135deg, #FFF8E1, #FFECB3) !important;
    color: #5D4037 !important;
    border-color: #FFD54F !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5), 0 2px 8px rgba(0,0,0,0.2) !important;
    animation: moonGlow 3s ease-in-out infinite;
}

@keyframes moonGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.5), 0 2px 8px rgba(0,0,0,0.2); }
    50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.8), 0 2px 12px rgba(0,0,0,0.3); }
}

/* Lunar Phases - New Moon */
.holiday-pill.new-moon {
    background: linear-gradient(135deg, #37474F, #263238) !important;
    color: #B0BEC5 !important;
    border-color: #455A64 !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), inset 0 0 5px rgba(255,255,255,0.1) !important;
}

/* Equinoxes and Solstices */
.holiday-pill.spring-equinox {
    background: linear-gradient(135deg, #E8F5E9, #C8E6C9, #F8BBD9) !important;
    color: #2E7D32 !important;
    border-color: #81C784 !important;
}

.holiday-pill.summer-solstice {
    background: linear-gradient(135deg, #FFF59D, #FFEE58, #FFB300) !important;
    color: #E65100 !important;
    border-color: #FFC107 !important;
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.5) !important;
}

.holiday-pill.fall-equinox {
    background: linear-gradient(135deg, #FFCCBC, #FF8A65, #D84315) !important;
    color: #3E2723 !important;
    border-color: #BF360C !important;
}

/* Chinese New Year */
.holiday-pill.chinese-new-year {
    background: linear-gradient(135deg, #C62828, #FF5252, #FFD54F) !important;
    color: #FFEB3B !important;
    border-color: #B71C1C !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}

/* Super Bowl */
.holiday-pill.super-bowl {
    background: linear-gradient(135deg, #1B5E20, #4CAF50) !important;
    color: white !important;
    border-color: #2E7D32 !important;
}

/* Mardi Gras */
.holiday-pill.mardi-gras {
    background: linear-gradient(135deg, #7B1FA2, #FFD54F, #2E7D32) !important;
    color: white !important;
    border-color: #6A1B9A !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
}

/* MLK Day */
.holiday-pill.mlk-day {
    background: linear-gradient(135deg, #1565C0, #42A5F5) !important;
    color: white !important;
    border-color: #0D47A1 !important;
}

/* Tax Day */
.holiday-pill.tax-day {
    background: linear-gradient(135deg, #455A64, #607D8B) !important;
    color: white !important;
    border-color: #37474F !important;
}

/* Election Day */
.holiday-pill.election-day {
    background: linear-gradient(135deg, #1565C0, #C62828) !important;
    color: white !important;
    border-color: #0D47A1 !important;
}

/* ==============================================
   School Meals - Compact for viewport fit
   ============================================== */
.school-meals {
    display: flex;
    flex-direction: column;
    gap: clamp(1px, 0.2vmin, 4px);
    margin-top: clamp(2px, 0.3vmin, 6px);
}

/* Lunch Pill */
.lunch-pill {
    padding: var(--pill-padding-v) var(--pill-padding-h);
    background: linear-gradient(135deg, #FFE082, #FFCA28);
    border-radius: clamp(4px, 0.5vmin, 8px);
    font-size: calc(var(--pill-font) * 0.9);
    font-weight: 600;
    color: #E65100;
    display: flex;
    align-items: center;
    gap: clamp(2px, 0.3vmin, 4px);
    border: 1px solid #FF9800;
    box-shadow: 0 1px 4px rgba(255, 152, 0, 0.3);
    flex-shrink: 1;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

.lunch-pill:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.5);
}

.lunch-pill .emoji {
    font-size: var(--fs-sm);
    flex-shrink: 0;
}

/* Different lunch colors based on food type */
.lunch-pill.pizza { background: linear-gradient(135deg, #FFCDD2, #EF5350); color: #B71C1C; border-color: #E53935; }
.lunch-pill.chicken { background: linear-gradient(135deg, #FFE0B2, #FFB74D); color: #E65100; border-color: #FF9800; }
.lunch-pill.taco { background: linear-gradient(135deg, #C8E6C9, #81C784); color: #1B5E20; border-color: #4CAF50; }
.lunch-pill.pasta { background: linear-gradient(135deg, #FFECB3, #FFD54F); color: #F57F17; border-color: #FFC107; }
.lunch-pill.burger { background: linear-gradient(135deg, #D7CCC8, #A1887F); color: #3E2723; border-color: #795548; }

/* Breakfast Pill */
.breakfast-pill {
    padding: var(--pill-padding-v) var(--pill-padding-h);
    background: linear-gradient(135deg, #E3F2FD, #90CAF9);
    border-radius: clamp(6px, 0.8vmin, 12px);
    font-size: var(--pill-font);
    font-weight: 600;
    color: #1565C0;
    display: inline-flex;
    align-items: center;
    gap: clamp(1px, 0.2vmin, 4px);
    border: 1px solid #42A5F5;
    font-family: 'Comic Sans MS', cursive, sans-serif;
    flex-shrink: 0;
    line-height: 1.2;
}

.breakfast-pill .emoji {
    font-size: var(--fs-xs);
    flex-shrink: 0;
}

/* Snack Pill */
.snack-pill {
    padding: var(--pill-padding-v) var(--pill-padding-h);
    background: linear-gradient(135deg, #F3E5F5, #CE93D8);
    border-radius: clamp(6px, 0.8vmin, 12px);
    font-size: var(--pill-font);
    font-weight: 600;
    color: #7B1FA2;
    display: inline-flex;
    align-items: center;
    gap: clamp(1px, 0.2vmin, 4px);
    border: 1px solid #AB47BC;
    font-family: 'Comic Sans MS', cursive, sans-serif;
    flex-shrink: 0;
    line-height: 1.2;
}

.snack-pill .emoji {
    font-size: var(--fs-xs);
    flex-shrink: 0;
}

/* Smaller meals inside school-meals container */
.school-meals .lunch-pill {
    margin-top: 0;
    border-width: 1px;
    border-style: solid;
}

/* ==============================================
   SMART CALENDAR SIZING - Viewport Proportional
   ============================================== */

/* ALL PAST DAYS - grayed but readable */
.calendar-day.distant-past,
.calendar-day.past-week,
.calendar-day.recent-past,
.calendar-day.yesterday {
    background: rgba(245, 245, 245, 0.95);
}

.calendar-day.distant-past .day-events,
.calendar-day.past-week .day-events,
.calendar-day.recent-past .day-events,
.calendar-day.yesterday .day-events {
    filter: grayscale(50%);
    opacity: 0.75;
}

.calendar-day.distant-past .day-events .event-pill,
.calendar-day.distant-past .day-events .holiday-pill,
.calendar-day.past-week .day-events .event-pill,
.calendar-day.past-week .day-events .holiday-pill,
.calendar-day.recent-past .day-events .event-pill,
.calendar-day.recent-past .day-events .holiday-pill,
.calendar-day.yesterday .day-events .event-pill,
.calendar-day.yesterday .day-events .holiday-pill {
    font-size: var(--pill-font);
    padding: var(--pill-padding-v) var(--pill-padding-h);
    background: #BBB !important;
    color: #444 !important;
}

.calendar-day.distant-past .day-num,
.calendar-day.past-week .day-num,
.calendar-day.recent-past .day-num,
.calendar-day.yesterday .day-num {
    font-size: var(--fs-sm);
    color: #777;
}

/* Hide school meals in past to save space */
.calendar-day.distant-past .school-meals,
.calendar-day.past-week .school-meals,
.calendar-day.recent-past .school-meals,
.calendar-day.yesterday .school-meals {
    display: none;
}

/* TODAY - highlighted and enlarged with GLOW */
.calendar-day.today {
    background: linear-gradient(135deg, rgba(255, 243, 224, 0.98), rgba(255, 213, 153, 0.98)) !important;
    box-shadow:
        inset 0 0 0 4px #FF5722,
        0 0 20px rgba(255, 87, 34, 0.5),
        0 0 40px rgba(255, 152, 0, 0.3),
        0 8px 25px rgba(216, 67, 21, 0.4) !important;
    z-index: 2;
    transform: scale(1.02);
    animation: todayPulse 3s ease-in-out infinite;
}

@keyframes todayPulse {
    0%, 100% { box-shadow: inset 0 0 0 4px #FF5722, 0 0 20px rgba(255, 87, 34, 0.5), 0 0 40px rgba(255, 152, 0, 0.3), 0 8px 25px rgba(216, 67, 21, 0.4); }
    50% { box-shadow: inset 0 0 0 4px #FF5722, 0 0 30px rgba(255, 87, 34, 0.7), 0 0 50px rgba(255, 152, 0, 0.4), 0 8px 25px rgba(216, 67, 21, 0.5); }
}

.calendar-day.today .day-num {
    font-size: calc(var(--fs-lg) * 1.1);
    font-weight: 800;
}

.calendar-day.today .event-pill,
.calendar-day.today .holiday-pill,
.calendar-day.today .lunch-pill {
    font-size: calc(var(--pill-font) + 1px);
    padding: calc(var(--pill-padding-v) + 1px) calc(var(--pill-padding-h) + 2px);
}

/* TOMORROW - highlighted as part of current week */
.calendar-day.tomorrow {
    background: linear-gradient(135deg, rgba(255, 248, 235, 0.98), rgba(255, 238, 210, 0.98));
    box-shadow: inset 0 0 0 2px #FFB74D;
}

.calendar-day.tomorrow .day-num {
    font-size: var(--fs-base);
    font-weight: 600;
    color: #E65100;
}

/* NEAR FUTURE CLOSE (2-3 days) - current week */
.calendar-day.near-future-close {
    background: rgba(255, 253, 240, 0.97);
    box-shadow: inset 0 0 0 1px #FFE082;
}

/* NEAR FUTURE (4-7 days) - could be current week */
.calendar-day.near-future {
    background: rgba(255, 255, 250, 0.96);
    box-shadow: inset 0 0 0 1px #FFF59D;
}

/* FAR FUTURE (8-14 days) */
.calendar-day.far-future {
    /* default styling */
}

.calendar-day.far-future .day-events .event-pill,
.calendar-day.far-future .day-events .holiday-pill {
    font-size: var(--pill-font);
    padding: var(--pill-padding-v) var(--pill-padding-h);
}

/* DISTANT FUTURE (more than 14 days) */
.calendar-day.distant-future {
    /* default styling */
}

/* ==============================================
   Today's Chores in Calendar Cell
   ============================================== */
.today-chores-container {
    display: none;
}

.chore-column {
    flex: 1;
    background: rgba(255,255,255,0.8);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm);
    border: 1px solid rgba(0,0,0,0.1);
}

.chore-column-header {
    font-size: var(--fs-xxs);
    font-weight: 700;
    text-align: center;
    padding: var(--spacing-sm);
    border-radius: 4px;
    margin-bottom: var(--spacing-sm);
}

.chore-column.liv .chore-column-header {
    background: var(--liv);
    color: white;
}

.chore-column.jane .chore-column-header {
    background: var(--jane);
    color: white;
}

.chore-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--fs-xxs);
    padding: var(--spacing-sm);
    border-radius: 4px;
    margin-bottom: var(--spacing-sm);
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}

.chore-item:hover {
    background: #E8F5E9;
}

.chore-item.done {
    background: #C8E6C9;
    text-decoration: line-through;
    opacity: 0.7;
}

.chore-checkbox {
    width: clamp(10px, 1.2vmin, 16px);
    height: clamp(10px, 1.2vmin, 16px);
    border: 2px solid #ccc;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xxs);
    flex-shrink: 0;
}

.chore-item.done .chore-checkbox {
    background: #4CAF50;
    border-color: #4CAF50;
    color: white;
}

/* Reward animation */
.reward-animation {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(40px, 8vmin, 80px);
    z-index: 9999;
    animation: celebrateReward 0.8s ease-out;
    pointer-events: none;
}

/* ==============================================
   4-Day Preview Section - Hidden by default to save space
   ============================================== */
.preview-section {
    display: none;
    margin-bottom: var(--spacing-sm);
    flex-shrink: 0;
}

.preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}

.preview-title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
}

.preview-day {
    background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(248,250,252,0.9));
    border-radius: var(--border-radius);
    padding: var(--spacing-sm);
    min-height: clamp(50px, 8vh, 120px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.preview-day:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.preview-day.today {
    background: linear-gradient(145deg, #FFF3E0, #FFE0B2);
    border: 2px solid var(--accent-orange);
}

.preview-day.tomorrow {
    background: linear-gradient(145deg, #E8F5E9, #C8E6C9);
    border: 2px solid #81C784;
}

.preview-day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.preview-day-name {
    font-size: var(--fs-xxs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
}

.preview-day-num {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
}

.preview-day.today .preview-day-num {
    color: var(--accent-orange);
}

.preview-day.tomorrow .preview-day-num {
    color: #4CAF50;
}

.preview-events {
    display: flex;
    flex-direction: column;
    gap: clamp(1px, 0.2vmin, 4px);
}

.preview-event {
    font-size: var(--fs-xxs);
    padding: var(--pill-padding-v) var(--pill-padding-h);
    border-radius: var(--border-radius);
    background: rgba(99, 102, 241, 0.15);
    color: #4338CA;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview-event.holiday {
    background: linear-gradient(135deg, #FEE2E2, #FECACA);
    color: #DC2626;
}

.preview-event.birthday {
    background: linear-gradient(135deg, #FCE7F3, #FBCFE8);
    color: #BE185D;
}

/* ==============================================
   Collapsed/Expanded Month Views
   ============================================== */
.collapsed-month {
    background: white;
    border: 2px solid var(--border-light);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm) var(--spacing-base);
    margin-bottom: var(--spacing-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.collapsed-month:hover {
    border-color: var(--border-gold);
    box-shadow: 0 2px 10px var(--shadow);
}

.collapsed-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.collapsed-name {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text-dark);
}

.collapsed-info {
    flex: 1;
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.event-badge {
    font-size: var(--fs-xxs);
    background: var(--accent-orange);
    color: white;
    padding: var(--pill-padding-v) var(--pill-padding-h);
    border-radius: clamp(6px, 0.8vmin, 10px);
}

.holiday-badge {
    font-size: var(--fs-sm);
}

.expand-arrow {
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

/* Mini Calendar for collapsed months */
.mini-calendar {
    margin-top: var(--spacing-sm);
}

.mini-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}

.mini-header {
    font-size: var(--fs-xxs);
    text-align: center;
    color: var(--text-muted);
    padding: var(--spacing-sm);
}

.mini-day {
    font-size: var(--fs-xxs);
    text-align: center;
    padding: var(--spacing-sm);
    border-radius: 3px;
    color: var(--text-dark);
}

.mini-day.empty {
    color: transparent;
}

.mini-day.today {
    background: var(--accent-orange);
    color: white;
    font-weight: 600;
}

.mini-day.has-event {
    background: #E3F2FD;
    font-weight: 500;
}

.mini-day.has-holiday {
    background: #FFF3E0;
    color: #E65100;
}

/* Expanded Month */
.expanded-month {
    background: rgba(255, 255, 255, 0.97);
    border: 3px solid var(--border-gold);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm);
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    height: 100%;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

.expanded-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    flex-shrink: 0;
    padding: var(--spacing-sm) 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    border-radius: var(--border-radius);
}

.expanded-header .month-title {
    font-size: calc(var(--fs-lg) * 1.2);
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    text-shadow: var(--text-glow);
}

.nav-arrow {
    width: clamp(24px, 3vmin, 40px);
    height: clamp(24px, 3vmin, 40px);
    border-radius: 50%;
    border: 2px solid var(--border-gold);
    background: white;
    color: var(--border-gold);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-arrow:hover {
    background: var(--border-gold);
    color: white;
}

/* ==============================================
   New Year Sparkles Animation (January)
   ============================================== */
.new-year-sparkles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.sparkle {
    position: absolute;
    top: -30px;
    animation: sparkleFloat linear infinite;
    filter: drop-shadow(0 0 6px gold);
}

@keyframes sparkleFloat {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(100vh) rotate(720deg) scale(0.3);
        opacity: 0;
    }
}

/* ==============================================
   January Theme - Fresh & Vibrant New Year Colors
   ============================================== */
.january-theme .calendar-grid {
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.95),
        rgba(230, 240, 255, 0.92),
        rgba(255, 245, 235, 0.92)
    );
    border-color: #5C6BC0;
}

.january-theme .calendar-day {
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.92),
        rgba(248, 250, 255, 0.88)
    );
    transition: all 0.3s ease;
}

.january-theme .calendar-day:hover {
    background: linear-gradient(145deg,
        rgba(255, 248, 225, 0.98),
        rgba(255, 253, 240, 0.95)
    );
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}

.january-theme .calendar-day.weekend {
    background: linear-gradient(145deg,
        rgba(255, 253, 250, 0.95),
        rgba(255, 245, 238, 0.92)
    );
}

/* Colorful day numbers for January */
.january-theme .calendar-day .day-num {
    color: #283593;
    text-shadow: 0 1px 0 rgba(255,255,255,0.9);
}

.january-theme .calendar-day:nth-child(7n+1) .day-num { color: #C62828; } /* Sunday - Red */
.january-theme .calendar-day:nth-child(7n+2) .day-num { color: #6A1B9A; } /* Monday - Purple */
.january-theme .calendar-day:nth-child(7n+3) .day-num { color: #1565C0; } /* Tuesday - Blue */
.january-theme .calendar-day:nth-child(7n+4) .day-num { color: #00695C; } /* Wednesday - Teal */
.january-theme .calendar-day:nth-child(7n+5) .day-num { color: #E65100; } /* Thursday - Orange */
.january-theme .calendar-day:nth-child(7n+6) .day-num { color: #AD1457; } /* Friday - Pink */
.january-theme .calendar-day:nth-child(7n) .day-num { color: #2E7D32; } /* Saturday - Green */

/* Subtle gradient backgrounds for variety */
.january-theme .calendar-day:nth-child(odd):not(.today):not(.tomorrow):not(.other-month) {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.95),
        rgba(232, 245, 253, 0.9)
    );
}

.january-theme .calendar-day:nth-child(even):not(.today):not(.tomorrow):not(.other-month) {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.95),
        rgba(253, 243, 232, 0.9)
    );
}

/* Vibrant borders for the grid */
.january-theme .calendar-day {
    border-color: rgba(92, 107, 192, 0.3);
}

/* Enhanced header for January */
.january-theme .day-header-cell {
    background: linear-gradient(180deg,
        rgba(63, 81, 181, 0.15),
        rgba(92, 107, 192, 0.1)
    );
    color: #283593;
    border-bottom-color: #5C6BC0;
}

.january-theme .day-header-cell.weekend {
    background: linear-gradient(180deg,
        rgba(233, 30, 99, 0.15),
        rgba(255, 64, 129, 0.1)
    );
    color: #C2185B;
}

/* Fresh New Year month title */
.january-theme .month-title {
    background: linear-gradient(90deg, #5C6BC0, #7E57C2, #AB47BC);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glowing effect for special days */
.january-theme .calendar-day:has(.holiday-pill.new-years) {
    background: linear-gradient(145deg,
        rgba(255, 248, 225, 0.98),
        rgba(255, 235, 180, 0.95)
    ) !important;
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.4);
}

.january-theme .calendar-day:has(.holiday-pill.full-moon) {
    background: linear-gradient(145deg,
        rgba(255, 253, 240, 0.98),
        rgba(255, 248, 225, 0.95)
    ) !important;
}