/* Desktop and tablet layout for app.html. Phones (< 700px) keep the original bottom-nav layout. */

/* ---- Tablet: wider column, same bottom bar ---- */
@media (min-width: 700px) and (max-width: 1023px) {
    .app-container,
    .bottom-nav,
    .app-header .header-content,
    .app-header .header-stats-row { max-width: 760px; margin-inline: auto; }
    .cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* ---- Desktop: right-hand sidebar, wide content ---- */
@media (min-width: 1024px) {
    :root { --side-w: 248px; }

    body { padding-bottom: 0; padding-right: var(--side-w); }

    /* Navigation becomes a fixed sidebar (RTL: on the right edge) */
    .bottom-nav {
        top: 0; bottom: 0; right: 0; left: auto;
        width: var(--side-w); max-width: none; margin: 0;
        flex-direction: column; justify-content: flex-start; align-items: stretch;
        gap: 6px;
        padding: 28px 16px;
        border-top: 0;
        border-radius: 0;
        border-left: 2px solid var(--nav-border);
        box-shadow: -6px 0 24px rgba(40, 25, 120, 0.08);
        overflow-y: auto;
    }
    .nav-item {
        flex: none; width: 100%;
        flex-direction: row; justify-content: flex-start; align-items: center;
        gap: 14px;
        padding: 13px 16px;
        font-size: 15px; font-weight: 800;
        border-radius: 16px;
    }
    .nav-item svg { width: 22px; height: 22px; flex: none; }
    .nav-item:hover { background: var(--accent-indigo-bg); }
    .nav-item.active { transform: none; }

    /* Header and content use the width, centered in the remaining space */
    .app-header { padding-inline: 32px; }
    .app-header .header-content,
    .app-header .header-stats-row { max-width: 960px; margin-inline: auto; }
    .app-container { max-width: 960px; padding: 20px 32px 56px; }

    /* Lists become grids */
    .cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; }

    /* Bottom sheets become centered dialogs */
    .modal-overlay { align-items: center; }
    .modal-sheet { max-width: 720px; border-radius: 28px; transform: translateY(24px); }
    .modal-overlay.open .modal-sheet { transform: none; }

    .consent-banner { bottom: 20px; inset-inline: auto; right: calc(var(--side-w) + 20px); left: 20px; }
}

@media (min-width: 1400px) {
    .app-header .header-content,
    .app-header .header-stats-row,
    .app-container { max-width: 1100px; }
    .cards-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Labels: readable sidebar and self-explanatory header buttons ---- */
.header-actions .btn-label { display: none; }

@media (min-width: 1024px) {
    /* beats `.bottom-nav .nav-item { font-size: 9.8px }` in styles.css */
    .bottom-nav .nav-item { font-size: 16px; font-weight: 800; padding: 14px 18px; white-space: nowrap; }
    .bottom-nav .nav-item svg { width: 24px; height: 24px; }
    .bottom-nav { gap: 8px; padding-top: 32px; }

    .header-actions { gap: 10px; }
    .header-actions .icon-btn { width: auto; height: 44px; padding: 0 16px; gap: 8px; border-radius: 14px; }
    .header-actions .icon-btn .btn-label { display: inline; font-size: 14px; font-weight: 800; color: var(--text-primary); }
    .header-actions .icon-btn svg { flex: none; }
}