/* Let the CRM page use the document scroll on mobile, like WhatsApp. */
@media (max-width: 767px) {
  body:has(.mobile-crm-shell) {
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto !important;
    overscroll-behavior-y: auto;
  }

  .mobile-dashboard-shell:has(.mobile-crm-shell) {
    height: auto;
    min-height: 100dvh;
  }

  .mobile-dashboard-shell:has(.mobile-crm-shell) .mobile-app-header {
    position: relative !important;
    top: auto !important;
  }

  .mobile-dashboard-shell:has(.mobile-crm-shell) .mobile-dashboard-main {
    height: auto !important;
    min-height: calc(100dvh - 64px);
    overflow: visible !important;
  }

  .mobile-dashboard-shell:has(.mobile-crm-shell) .mobile-crm-shell {
    height: auto !important;
    min-height: calc(100dvh - 120px);
    overflow: visible !important;
  }

  .mobile-dashboard-shell:has(.mobile-crm-shell) .mobile-crm-shell > div.flex.gap-4 {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    overscroll-behavior-y: auto;
  }

  .mobile-dashboard-shell:has(.mobile-crm-shell) .mobile-crm-shell > div.flex.gap-4 > div.flex.flex-col {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .mobile-dashboard-shell:has(.mobile-crm-shell) .mobile-crm-shell > div.flex.gap-4 > div.flex.flex-col > div.p-0 {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
}