/* ===== 20. RESPONSIVE LAYOUT (Desktop Enhancements) ===== */
.app-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.content-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* Desktop layout */
@media (min-width: 1024px) {
    .content-grid {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: var(--space-xl);
        padding: 0 var(--space-lg);
        align-items: start;
    }

    .sidebar-column {
        position: sticky;
        top: 100px; /* Below sticky header */
    }

    .stats-container {
        margin-bottom: 0;
    }

    .streak-card, .reward-card {
        margin: 0 0 var(--space-md) 0 !important; /* Remove horizontal margins on desktop */
    }

    .header {
        padding: var(--space-lg) var(--space-lg);
        margin-bottom: var(--space-md);
    }
}

/* Adjust header contents for centered look if needed */
@media (min-width: 1200px) {
    .header {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Ensure focus mode stays centered and focused */
body.focus-mode .content-grid {
    display: flex; /* Back to single column for focus */
    max-width: 800px;
    margin: 0 auto;
}

body.focus-mode .sidebar-column {
    display: none; /* Hide stats in focus mode to reduce distraction */
}