/* Daymaker Calendars - responsive.css - Compact Version */
@media (min-width: 901px) {
    body { overflow: hidden; height: 100vh; }
    .app-container { display: flex; flex-direction: column; padding: 1rem; gap: 1rem; height: 100vh; overflow: hidden; }
    .app-container:has(.app-header[style*="display: none"]), .app-container:has(.app-header[style*="display:none"]) { padding-top: 5rem; }
    .app-header { align-self: flex-start; flex-shrink: 0; }
    .time-date-container { position: absolute; top: 1.2rem; left: 50%; transform: translateX(-50%); z-index: 100; flex-wrap: nowrap; flex-shrink: 0; display: flex; gap: 1rem; margin-bottom: 1.5rem; }
    .current-date-display { font-size: 1.5rem; padding: 0.5rem 1.1rem; }
    .current-time-display { font-size: 2rem; padding: 0.29rem 1.1rem; }
    @media (max-width: 1200px) { .time-date-container { left: 56%; } }
    @media (max-width: 1100px) { .time-date-container { left: 58%; } }
    @media (max-width: 1000px) { .time-date-container { left: 60%; } }
    @media (max-width: 950px) { .time-date-container { flex-direction: column !important; gap: 0.5rem; left: 50%; } }
    .main-content-wrapper { flex: 1; display: flex; gap: 1rem; min-height: 0; overflow: hidden; margin-top: 1.5rem; }
    .left-section { min-height: 0; overflow: hidden; }
    .events-panel { min-height: 0; overflow-y: auto; }
    .calendar-panel { min-height: 0; overflow: hidden; }
    .calendar-container { max-height: 100%; height: 100%; }
    .calendar-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    .days-grid { flex: 1; min-height: 0; height: auto; }
}
@media (min-width: 901px) and (orientation: landscape) {
    .app-container { padding: 0.5rem; gap: 0.5rem; }
    .calendar-body { padding: 0.75rem; }
    .days-grid { gap: 0.4rem; }
    .day-cell { padding: 0.4rem; }
    .calendar-header { padding: 1rem; }
    .calendar-footer { padding: 0.75rem; }
    .calendar-footer p { font-size: 1.2rem; }
}
@media (max-width: 1319px) and (min-width: 901px) {
    .app-title-container { display: grid !important; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0.25rem 0.75rem; align-items: center; }
    .calendar-icon { grid-column: 1; grid-row: 1 / 3; width: 48px; height: 48px; }
    .app-title { grid-column: 2; grid-row: 1; margin: 0; line-height: 1; }
    .app-subtitle { grid-column: 2; grid-row: 2; margin: 0; line-height: 1; }
}
@media (max-width: 1099px) and (min-width: 901px) {
    .app-title { font-size: 1.75rem !important; }
    .app-subtitle { font-size: 1rem !important; }
    .calendar-icon { width: 40px !important; height: 40px !important; }
}
@media (max-width: 900px) and (min-width: 769px) {
    body { overflow-y: auto; overflow-x: hidden; height: auto; }
    .app-container { display: flex; flex-direction: column; overflow: visible; height: auto; min-height: 100vh; gap: 0.5rem; padding: 0.5rem; }
    .app-header { flex-shrink: 0; padding: 0.5rem; }
    .settings-cog { width: 45px; height: 45px; top: 15px; right: 15px; }
    .settings-cog svg { width: 28px; height: 28px; }
    .calendar-icon { width: 36px; height: 36px; }
    .app-title { font-size: 1.5rem; }
    .app-subtitle { font-size: 1rem; }
    .time-date-container { flex-direction: column; gap: 0.4rem; flex-shrink: 0; position: relative; top: auto; left: auto; transform: none; }
    .current-date-display { font-size: 1.3rem; padding: 0.4rem 0.9rem; width: 100%; }
    .current-time-display, .weather-display { font-size: 1.8rem; padding: 0.25rem 0.9rem; }
    .weather-display { font-size: 1.3rem; padding: 0.4rem 0.9rem; }
    .weather-icon { font-size: 1.6rem; }
    .weather-temp { font-size: 1.8rem; }
    .main-content-wrapper { flex-direction: column; overflow: visible; flex-shrink: 0; gap: 0.5rem; }
    .left-section { flex: 0 0 auto; width: 100%; overflow: visible; }
    .events-panel { flex: 0 0 auto; max-height: 350px; min-height: auto; overflow-y: auto; padding: 1rem; }
    .events-header h2 { font-size: 1.5rem; }
    .events-header p { font-size: 1rem; }
    .holidays-title { font-size: 1.1rem; }
    .event-item { padding: 0.5rem; gap: 0.5rem; }
    .event-checkmark { font-size: 1.3rem; top: 6px; right: 6px; }
    .event-number { width: 24px; height: 24px; font-size: 0.8rem; }
    .event-text { font-size: 0.9rem; }
    .event-time { font-size: 0.75rem; }
    .add-event-section button { font-size: 0.9rem; padding: 0.6rem; }
    .calendar-panel { padding: 0; overflow: visible; width: 100%; flex: 0 0 auto; }
    .calendar-section { width: 100%; overflow: visible; }
    .calendar-container { max-width: 100%; width: 100%; border-radius: 1rem; overflow: hidden; height: auto; max-height: none; border-width: 3px; }
    .calendar-header { padding: 0.8rem; }
    .header-decorations { font-size: 1.8rem; }
    .month-year-selector select { font-size: 1.1rem; padding: 0.35rem 0.7rem; }
    .nav-arrow { font-size: 1.4rem; width: 38px; height: 38px; }
    .left-arrow { left: 0.4rem; }
    .right-arrow { right: 0.4rem; }
    .calendar-body { overflow: visible; height: auto; padding: 0.8rem; }
    .day-headers { gap: 0.3rem; margin-bottom: 0.4rem; }
    .day-header { font-size: 0.85rem; padding: 0.35rem 0.2rem; }
    .days-grid { overflow: visible; height: auto; min-height: auto; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(65px, auto); gap: 0.3rem; }
    .day-cell { min-height: 65px; height: auto; padding: 0.4rem 0.25rem; }
    .day-number { font-size: 1rem; }
    .day-icon { font-size: 1rem; }
    .special-day-icon { font-size: 1.2rem; }
    .day-events-list { font-size: 0.5rem; top: 14px; left: 2px; right: 2px; max-height: 35px; line-height: 1.3; font-weight: 700; letter-spacing: 0.2px; }
    .day-cell.special-event-day .day-events-list, .day-cell.holiday-day .day-events-list { top: 12px; max-height: 28px; }
    .day-cell.has-events::after { font-size: 1.8rem; bottom: 2px; }
    .today-label { font-size: 0.6rem; top: 2px; }
    .special-event-label, .holiday-label { font-size: 0.5rem; top: 2px; letter-spacing: 0.2px; }
    .special-event-marker { font-size: 1rem; bottom: 2px; }
    .calendar-footer { padding: 0.8rem; }
    .calendar-footer p { font-size: 1.1rem; }
    .modal { padding: 1.5rem; width: 95%; }
    .modal h3 { font-size: 1.3rem; }
    .form-group label { font-size: 0.9rem; }
    .form-group input { padding: 0.6rem; font-size: 0.9rem; }
    .modal-actions button { padding: 0.6rem; font-size: 0.9rem; }
    .modal-date-display { font-size: 0.9rem; }
    .time-error { font-size: 0.85rem; }
    .event-list-modal-content { width: 95%; max-height: 90vh; }
    .modal-close-btn { width: 36px; height: 36px; font-size: 1.3rem; top: 0.75rem; right: 0.75rem; }
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .app-container { padding: 0.5rem; gap: 0.5rem; }
    .calendar-body { padding: 0.75rem; }
    .days-grid { gap: 0.35rem; grid-auto-rows: minmax(75px, auto); }
}
@media (max-width: 768px) {
    body { overflow-y: auto; overflow-x: hidden; height: auto; }
    .app-container { display: flex; flex-direction: column; overflow: visible; height: auto; min-height: 100vh; gap: 0.3rem; padding: 0.3rem; }
    .app-header { flex-shrink: 0; padding: 0.3rem; }
    .time-date-container { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; flex-shrink: 0; position: relative; top: auto; left: auto; transform: none; }
    .current-date-display { grid-column: 1 / -1; font-size: 1.1rem; padding: 0.35rem 0.8rem; }
    .current-time-display { font-size: 1.6rem; padding: 0.35rem 1rem; }
    .weather-display { font-size: 1.1rem; padding: 0.35rem 0.8rem; }
    .weather-icon { font-size: 1.4rem; }
    .weather-temp { font-size: 1.6rem; }
    .weather-loading, .weather-error, .weather-setup { font-size: 0.9rem; }
    .main-content-wrapper { flex-direction: column; overflow: visible; flex-shrink: 0; gap: 0.3rem; }
    .left-section { flex: 0 0 auto; width: 100%; overflow: visible; }
    .events-panel { flex: 0 0 auto; max-height: 250px; min-height: auto; overflow-y: auto; padding: 0.6rem; }
    .events-header h2 { font-size: 1.3rem; }
    .event-item { padding: 0.4rem; }
    .event-checkmark { font-size: 1.2rem; top: 4px; right: 4px; }
    .calendar-panel { padding: 0; overflow: visible; width: 100%; flex: 0 0 auto; }
    .calendar-section { width: 100%; overflow: visible; }
    .calendar-container { max-width: 100%; width: 100%; border-radius: 0.8rem; overflow: hidden; height: auto; max-height: none; border-width: 2px; }
    .calendar-header { padding: 0.6rem; }
    .header-decorations { font-size: 1.5rem; }
    .month-year-selector select { font-size: 1rem; padding: 0.3rem 0.6rem; }
    .nav-arrow { font-size: 1.3rem; width: 36px; height: 36px; }
    .calendar-body { overflow: visible; height: auto; padding: 0.5rem; }
    .day-headers { gap: 0.25rem; margin-bottom: 0.3rem; }
    .day-header { font-size: 0.75rem; padding: 0.3rem 0.15rem; }
    .days-grid { overflow: visible; height: auto; min-height: auto; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(55px, auto); gap: 0.25rem; }
    .day-cell { min-height: 55px; height: auto; padding: 0.3rem 0.2rem; }
    .day-number { font-size: 0.95rem; }
    .day-icon { font-size: 0.95rem; }
    .calendar-footer { padding: 0.6rem; }
    .calendar-footer p { font-size: 1rem; }
    .day-events-list { font-size: 0.5rem; top: 14px; left: 2px; right: 2px; max-height: 35px; line-height: 1.3; font-weight: 700; letter-spacing: 0.2px; }
    .day-cell.special-event-day .day-events-list, .day-cell.holiday-day .day-events-list { top: 12px; max-height: 28px; }
    .day-cell.has-events::after { font-size: 1.8rem; bottom: 2px; }
    .today-label { font-size: 0.6rem; top: 2px; }
    .special-event-label, .holiday-label { font-size: 0.5rem; top: 2px; letter-spacing: 0.2px; }
    .special-event-marker { font-size: 1rem; bottom: 2px; }
    .event-list-modal-content { width: 95%; max-height: 90vh; }
    .modal-close-btn { width: 36px; height: 36px; font-size: 1.3rem; top: 0.75rem; right: 0.75rem; }
}
@media (max-width: 900px) and (orientation: landscape) {
    body { overflow-y: auto; height: auto; }
    .app-container { min-height: 100vh; height: auto; overflow: visible; padding: 0.25rem; gap: 0.25rem; }
    .time-date-container { flex-direction: row !important; gap: 0.5rem; }
    .current-date-display { font-size: 0.9rem; padding: 0.25rem 0.5rem; }
    .current-time-display { font-size: 1.2rem; padding: 0.25rem 0.5rem; }
    .events-panel { max-height: 300px; }
    .calendar-header { padding: 0.5rem; }
    .calendar-body { padding: 0.5rem; }
    .day-headers { margin-bottom: 0.25rem; }
    .day-header { font-size: 0.7rem; padding: 0.25rem; }
    .days-grid { gap: 0.25rem; grid-auto-rows: minmax(60px, auto); }
    .day-cell { padding: 0.25rem; min-height: 60px; }
    .day-number { font-size: 0.9rem; }
    .calendar-footer { padding: 0.5rem; }
    .calendar-footer p { font-size: 0.9rem; }
    .header-decorations { font-size: 1.5rem; }
    .month-year-selector select { font-size: 1rem; padding: 0.25rem 0.5rem; }
    .nav-arrow { width: 35px; height: 35px; font-size: 1.2rem; }
}
@media (max-width: 480px) {
    .calendar-icon { width: 32px; height: 32px; }
    .app-title { font-size: 1.2rem; }
    .app-subtitle { font-size: 0.85rem; }
    .current-date-display { font-size: 1rem; padding: 0.4rem 0.8rem; }
    .current-time-display { font-size: 1.5rem; padding: 0.4rem 1rem; letter-spacing: 1px; }
    .weather-display { font-size: 1rem; padding: 0.3rem 0.7rem; }
    .weather-icon { font-size: 1.2rem; }
    .weather-temp { font-size: 1.4rem; }
    .events-header h2 { font-size: 1.3rem; }
    .event-item { padding: 0.4rem; }
    .event-checkmark { font-size: 1.2rem; top: 4px; right: 4px; }
    .event-number { width: 22px; height: 22px; font-size: 0.75rem; }
    .event-text { font-size: 0.85rem; }
    .event-time { font-size: 0.7rem; }
    .calendar-header { padding: 0.75rem; }
    .month-year-selector { gap: 0.5rem; }
    .month-year-selector select { font-size: 1rem; padding: 0.3rem 0.5rem; }
    .calendar-body { padding: 0.5rem; }
    .day-headers { gap: 0.25rem; }
    .day-header { font-size: 0.7rem; padding: 0.3rem; }
    .days-grid { gap: 0.25rem; grid-auto-rows: minmax(60px, auto); }
    .day-cell { padding: 0.3rem 0.2rem; min-height: 60px; }
    .day-number { font-size: 1rem; }
    .day-icon { font-size: 1rem; }
    .day-cell.has-events::after { font-size: 1.5rem; bottom: 1px; }
    .special-day-icon { font-size: 1.2rem; }
    .calendar-footer p { font-size: 1rem; }
    .nav-arrow { font-size: 1.2rem; width: 35px; height: 35px; }
    .modal { padding: 1rem; }
    .modal h3 { font-size: 1.1rem; margin-bottom: 1rem; }
}
@media (max-height: 700px) {
    .app-container { padding: 0.2rem; gap: 0.2rem; }
    .time-date-container { gap: 0.3rem; }
    .current-date-display { font-size: 1rem; padding: 0.3rem 0.7rem; }
    .current-time-display { font-size: 1.4rem; padding: 0.3rem 0.8rem; }
    .weather-display { font-size: 1rem; padding: 0.3rem 0.7rem; }
    .weather-icon { font-size: 1.2rem; }
    .weather-temp { font-size: 1.4rem; }
    .events-panel { max-height: 200px; padding: 0.5rem; }
    .calendar-header { padding: 0.4rem; }
    .calendar-body { padding: 0.4rem; }
    .days-grid { gap: 0.2rem; grid-auto-rows: minmax(50px, auto) !important; }
    .day-cell { padding: 0.25rem 0.15rem; min-height: 50px !important; }
    .day-headers { margin-bottom: 0.2rem; gap: 0.2rem; }
    .day-header { padding: 0.25rem 0.1rem; font-size: 0.7rem; }
    .calendar-footer { padding: 0.4rem; }
    .calendar-footer p { font-size: 0.9rem; }
    .month-year-selector select { font-size: 0.95rem; padding: 0.25rem 0.5rem; }
    .nav-arrow { width: 32px; height: 32px; font-size: 1.2rem; }
    .day-number { font-size: 0.9rem; }
    .day-icon { font-size: 0.9rem; }
}
@media (max-height: 600px) {
    .app-header { padding: 0.25rem; }
    .calendar-icon { width: 32px; height: 32px; }
    .app-title { font-size: 1.2rem; }
    .app-subtitle { font-size: 0.9rem; }
    .calendar-header { padding: 0.4rem; }
    .header-decorations { font-size: 1.5rem; }
    .month-year-selector select { font-size: 0.9rem; padding: 0.25rem 0.4rem; }
    .nav-arrow { width: 30px; height: 30px; font-size: 1rem; }
    .day-header { font-size: 0.65rem; padding: 0.2rem; }
    .day-number { font-size: 0.85rem; }
    .calendar-footer p { font-size: 0.85rem; }
}
@media (max-width: 768px) {
    .screensaver-calendar-icon { width: 120px; height: 120px; }
    .calendar-top { font-size: 0.7rem; letter-spacing: 1.5px; top: 8px; }
    .calendar-date { font-size: 3.5rem; margin-top: 25px; }
    .screensaver-time { font-size: 4rem; margin-bottom: 0.75rem; }
    .screensaver-date { font-size: 1.5rem; margin-bottom: 1.5rem; }
    .screensaver-weather { font-size: 1.2rem; margin-bottom: 2rem; }
    .screensaver-hint { font-size: 1rem; }
}
@media (max-width: 480px) {
    .screensaver-calendar-icon { width: 100px; height: 100px; }
    .calendar-top { font-size: 0.6rem; letter-spacing: 1px; top: 6px; }
    .calendar-date { font-size: 3rem; margin-top: 20px; }
    .screensaver-time { font-size: 3rem; margin-bottom: 0.5rem; }
    .screensaver-date { font-size: 1.2rem; margin-bottom: 1rem; }
    .screensaver-weather { font-size: 1rem; margin-bottom: 1.5rem; }
    .screensaver-hint { font-size: 0.9rem; }
}
@media (max-width: 900px) and (orientation: landscape) {
    .screensaver-calendar-icon { width: 100px; height: 100px; }
    .calendar-top { font-size: 0.65rem; letter-spacing: 1.2px; }
    .calendar-date { font-size: 3rem; }
    .screensaver-time { font-size: 3.5rem; }
    .screensaver-date { font-size: 1.3rem; margin-bottom: 1rem; }
    .screensaver-weather { font-size: 1.1rem; margin-bottom: 1.5rem; }
}

/* ============================================
   CALENDAR HEIGHT CONSISTENCY FIX
   Add these rules to responsive.css
   ============================================ */

/* CRITICAL FIX: Ensure consistent heights across all months */
@media (max-width: 768px) {
    /* Force consistent grid row heights */
    .days-grid {
        grid-auto-rows: minmax(55px, 55px) !important; /* Fixed height, not auto */
    }
    
    .day-cell {
        min-height: 55px !important;
        max-height: 55px !important; /* Add max-height */
        height: 55px !important;
        overflow: hidden; /* Prevent content overflow */
    }
    
    /* Special day backgrounds should not affect cell height */
    .day-cell.halloween,
    .day-cell.special-day,
    .day-cell.thanksgiving {
        min-height: 55px !important;
        max-height: 55px !important;
        height: 55px !important;
    }
    
    /* Ensure special day background doesn't push height */
    .special-day-bg {
        position: absolute;
        font-size: 4rem;
        opacity: 0.2;
        pointer-events: none; /* Prevent interaction */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        line-height: 1;
    }
}

@media (min-width: 768px) and (max-width: 900px) {
    /* Tablet portrait view */
    .days-grid {
        grid-auto-rows: minmax(65px, 65px) !important;
    }
    
    .day-cell {
        min-height: 65px !important;
        max-height: 65px !important;
        height: 65px !important;
        overflow: hidden;
    }
    
    .day-cell.halloween,
    .day-cell.special-day,
    .day-cell.thanksgiving {
        min-height: 65px !important;
        max-height: 65px !important;
        height: 65px !important;
    }
}

@media (max-width: 900px) and (orientation: landscape) {
    /* Mobile landscape */
    .days-grid {
        grid-auto-rows: minmax(60px, 60px) !important;
    }
    
    .day-cell {
        min-height: 60px !important;
        max-height: 60px !important;
        height: 60px !important;
        overflow: hidden;
    }
    
    .day-cell.halloween,
    .day-cell.special-day,
    .day-cell.thanksgiving {
        min-height: 60px !important;
        max-height: 60px !important;
        height: 60px !important;
    }
}

@media (max-height: 700px) {
    /* Short viewport heights */
    .days-grid {
        grid-auto-rows: minmax(50px, 50px) !important;
    }
    
    .day-cell {
        min-height: 50px !important;
        max-height: 50px !important;
        height: 50px !important;
        overflow: hidden;
    }
    
    .day-cell.halloween,
    .day-cell.special-day,
    .day-cell.thanksgiving {
        min-height: 50px !important;
        max-height: 50px !important;
        height: 50px !important;
    }
}

/* ============================================
   ADDITIONAL SAFEGUARDS
   ============================================ */

/* Ensure special day icon doesn't push height */
.special-day-icon {
    font-size: 1.8rem;
    animation: pulse 2s infinite;
    z-index: 10;
    position: absolute; /* Make sure it's positioned absolutely */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    line-height: 1;
}

/* Ensure day number in special cells is properly positioned */
.day-cell.halloween .day-number,
.day-cell.thanksgiving .day-number,
.day-cell.special-day .day-number {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    z-index: 10;
}
/* ===== Header buttons: account + settings are fixed at the top right =====
   Desktop widths where the centered date/time/weather row would run under the
   two buttons (or, stacked, down over the calendar): keep one row, anchored
   just left of the buttons, a size smaller, without the weather condition
   text ("Sunny"). */
@media (min-width: 901px) and (max-width: 1199px) {
    .time-date-container { left: auto !important; right: 150px; top: 1.4rem; transform: none; flex-direction: row !important; gap: 0.5rem; }
    .current-date-display { font-size: 1.1rem; padding: 0.4rem 0.8rem; }
    .current-time-display { font-size: 1.4rem; padding: 0.25rem 0.8rem; }
    .weather-display { font-size: 1.1rem; padding: 0.3rem 0.7rem; }
    .weather-temp { font-size: 1.3rem; }
    .weather-condition { display: none; }
}
/* Stacked layouts: the logo row reserves the buttons' height, so the date bar
   starts below them (and leaves room for them when the title is hidden) */
@media (max-width: 900px) {
    .app-header { min-height: 64px; }
    .app-container:has(.app-header[style*="display: none"]) { padding-top: 70px; }
}

/* Short screens: the 200px events-panel cap above squeezed the list to a
   sliver. Side by side, the column already limits it; stacked, the page
   scrolls, so let the panel take the room it needs. */
@media (max-height: 700px) and (min-width: 901px) {
    .events-panel { max-height: none; }
}
@media (max-height: 700px) and (max-width: 900px) {
    .events-panel { max-height: 350px; min-height: 220px; }
}