/***
Global Responsive Tables - Mobile Scrolling Support
This file ensures all tables with .table-responsive class work properly on mobile devices
***/
.table-responsive {
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  -ms-overflow-style: -ms-autohiding-scrollbar !important;
  width: 100%;
  display: block;
}

/* Auto-wrap tables in common containers for responsive behavior */
.portlet-body > table:not(.table-responsive),
.portlet-body > .table-responsive,
.dataTables_wrapper .table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  display: block;
  width: 100%;
}

.portlet-body {
  overflow-x: visible !important;
  overflow-y: visible !important;
}

@media (max-width: 768px) {
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .table-responsive table,
  .portlet-body > table {
    min-width: 600px;
    width: 100% !important;
  }
  
  .portlet-body {
    padding: 10px 5px;
    overflow-x: visible !important;
  }
  
  /* Auto-wrap tables in portlet-body for mobile */
  .portlet-body > table {
    display: block;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 480px) {
  .table-responsive table,
  .portlet-body > table {
    min-width: 500px;
  }
}