/* Planner Page - css/pages/planner.css */

/* Sticky footer: make the content area a flex column so the footer is pushed
   to the bottom of the viewport when content is short, and flows after the
   content when it's tall. Scoped to the planner page so other pages are
   unaffected. */
body[data-page="planner"] .main-content {
    display: flex;
    flex-direction: column;
}
body[data-page="planner"] #plannerPage {
    flex: 1 0 auto;         /* grow to fill, pushing the footer down */
}
body[data-page="planner"] .app-footer {
    margin-top: auto;       /* anchor to the bottom of the flex column */
    width: 100%;
}

/* Planner Layout */
.planner-container {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 2rem;
    /* Was a fixed 70vh, which left the page short and let the footer float
       mid-screen. Let it grow with content so the page (and footer) size
       naturally. */
    min-height: 60vh;
    margin-top: 2rem;
}

.planner-sidebar {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    box-shadow: var(--shadow-lg);
    height: fit-content;
}

.active-trip-details {
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.planner-main {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    overflow-y: auto;
}

/* Timeline */
.timeline {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.timeline-day {
    background: var(--bg-card);
    padding: 1.5rem;
    border-left: 5px solid var(--sunset-orange);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    transition: box-shadow var(--transition-fast);
}

.timeline-day:hover {
    box-shadow: 4px 0 12px rgba(255, 107, 53, 0.15);
}

.day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.day-number {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sunset-orange);
}

.day-location {
    font-size: 1.1rem;
    font-weight: 600;
}

.day-activities {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
}

/* Trip Stats */
.trip-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.stat-box {
    text-align: center;
    padding: 1rem;
    background: var(--gradient-card);
    border-radius: var(--radius-lg);
}

/* Responsive */
@media (max-width: 1024px) {
    .planner-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .timeline-day {
        padding: 1rem;
    }
}

/* ── Edge-to-edge containers on phones ───────────────────────────────────
   Drop the #plannerPage (.container) side padding so the sidebar and main
   panels span the full viewport width; re-pad only the text header/controls
   so headings don't touch the screen edge. */
@media (max-width: 680px) {
    #plannerPage {
        padding-left: 0;
        padding-right: 0;
    }
    #plannerPage > .page-header,
    #plannerPage > .planner-controls {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .planner-container {
        gap: 0.5rem;
        margin-top: 1rem;
    }
    .planner-sidebar,
    .planner-main {
        border-radius: 0;   /* full-bleed panels, like the feed cards */
    }
    /* The fixed bottom-nav is the primary navigation on phones, so the footer
       (which just duplicates those links) is redundant here — hide it. */
    .app-footer {
        display: none;
    }
}