/* =========================================================
   Mobile and tablet
   ========================================================= */

@media (max-width: 991.98px) {
    body {
        background: var(--app-bg);
    }

    .desktop-nav {
        display: none !important;
    }

    .mobile-topbar {
        position: sticky;
        top: 0;
        z-index: 1020;

        display: flex !important;
        align-items: center;
        justify-content: space-between;

        min-height: var(--mobile-topbar-height);
        padding: 10px 14px;

        background: rgba(255, 255, 255, 0.92);
        border-bottom: 1px solid var(--app-border);
        backdrop-filter: blur(14px);
    }

    .page-shell {
        padding: 14px 12px calc(var(--mobile-bottom-nav-height) + 20px);
    }

    .page-header {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 14px;
    }

    .page-title {
        font-size: 1.45rem;
    }

    .page-subtitle {
        font-size: 0.9rem;
    }

    .section-card {
        border-radius: var(--app-radius-md);
    }

    .section-card-header {
        padding: 14px 16px;
    }

    .section-card-body {
        padding: 16px;
    }

    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block;
    }
}

/* =========================================================
   Mobile portrait
   ========================================================= */

@media (max-width: 991.98px) and (orientation: portrait) {
    .mobile-portrait-only {
        display: block;
    }

    .mobile-landscape-only {
        display: none !important;
    }
}

/* =========================================================
   Mobile landscape
   ========================================================= */

@media (max-width: 991.98px) and (orientation: landscape) {
    .mobile-portrait-only {
        display: none !important;
    }

    .mobile-landscape-only {
        display: block;
    }

    .page-shell {
        padding-top: 10px;
        padding-bottom: 12px;
    }
}

/* =========================================================
   Desktop
   ========================================================= */

@media (min-width: 992px) {
    .desktop-nav {
        display: block !important;
    }

    .mobile-topbar,
    .mobile-bottom-nav,
    .mobile-only,
    .mobile-portrait-only,
    .mobile-landscape-only {
        display: none !important;
    }

    .desktop-only {
        display: block;
    }
}