/*
 * CALENDAR-WIDE-1024
 * Search this name. The only wide calendar layout.
 * This file: css/calendar.css
 * js/app.js — wideCalendarLayoutQuery() returns the same query
 *
 * Below 1024px (rules in css/styles.css): stacked month, task dots,
 * task list under the calendar.
 * 1024px and up: month fills the view, side task list hidden, task chips
 * inside the day cells, week rows share the leftover height.
 * Width stays full when a legend filter has no tasks.
 */
@media (min-width: 1024px) {
    .main-content:has(#calendarView.active) {
        padding-bottom: 1.25rem;
    }

    #calendarView.active {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        height: calc(100vh - 70px - env(safe-area-inset-top, 0px) - 1.25rem);
        max-height: calc(100vh - 70px - env(safe-area-inset-top, 0px) - 1.25rem);
        overflow: hidden;
    }

    #calendarView.active .content-panel {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        width: 100%;
        max-width: none;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
        align-self: stretch;
        box-sizing: border-box;
    }

    #calendarView .calendar-task-row {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: 1rem;
        margin-bottom: 1rem;
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        margin-left: auto;
        margin-right: auto;
        flex: 1 1 auto;
        min-height: 0;
    }

    /* Day list is hidden for now; the month uses the full row and the leftover view height. */
    #calendarView .calendar-task-row .calendar-container {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        width: 100%;
        max-width: none;
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 0;
        padding-bottom: 0;
    }

    #calendarView .calendar-header {
        flex: 0 0 auto;
        margin-bottom: 0.35rem;
        padding-bottom: 0.35rem;
    }

    #calendarView #calendar.calendar-grid {
        flex: 1 1 auto;
        align-self: stretch;
        width: 100%;
        min-width: 0;
        min-height: 0;
        margin-top: 0;
    }

    #calendarView .calendar-task-row:has(#calendarContainer[style*="display: none"]) {
        display: none;
    }

    #calendarView .calendar-task-row .task-details-panel {
        display: none !important;
    }

    #calendarView .calendar-task-row .task-details-panel.active {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: none;
        align-self: flex-start;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        pointer-events: auto;
        opacity: 1;
        transform: none;
        border-radius: 2px;
        max-height: min(88vh, 760px);
    }

    #calendarView .task-details-panel.active.list-expanded .task-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #calendarView .calendar-day {
        justify-content: flex-start;
        align-items: stretch;
        padding: 0.35rem 0;
        overflow: hidden;
        aspect-ratio: auto;
        height: auto;
        min-height: 0;
        align-self: stretch;
    }

    #calendarView .calendar-day .day-number {
        align-self: flex-start;
        flex: 0 0 auto;
        margin: 0 0 0.25rem 0.35rem;
        font-size: 0.75rem;
        line-height: 1.2;
    }

    #calendarView .calendar-day-chips {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.2rem;
        width: 100%;
        min-width: 0;
        min-height: 0;
        flex: 1 1 auto;
        padding: 0 0.35rem;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--border-color) transparent;
    }

    #calendarView .calendar-day-chip {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 0.12rem 0.35rem;
        border-radius: 0.2rem;
        font-size: 0.7rem;
        font-weight: var(--font-weight-medium);
        line-height: 1.25;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background: rgba(104, 211, 145, 0.22);
        cursor: grab;
        user-select: none;
        flex: 0 0 auto;
    }

    #calendarView .calendar-day-chip.dragging {
        opacity: 0.5;
        cursor: grabbing;
    }

    #calendarView .calendar-day-chip.overdue {
        background: rgba(245, 101, 101, 0.28);
    }

    #calendarView .calendar-day-chip.due-soon {
        background: rgba(237, 137, 54, 0.28);
    }

    #calendarView .calendar-day-chip.completed {
        background: rgba(72, 187, 120, 0.2);
    }

    body.light-theme #calendarView .calendar-day-chip {
        background: rgba(72, 187, 120, 0.16);
    }

    body.light-theme #calendarView .calendar-day-chip.overdue {
        background: rgba(229, 62, 62, 0.16);
    }

    body.light-theme #calendarView .calendar-day-chip.due-soon {
        background: rgba(221, 107, 32, 0.16);
    }
} /* /CALENDAR-WIDE-1024 */