/* Phones (< 768px). The same file is in the operations, communal and portal apps; keep them alike.
   The sidebar becomes a full-width menu under the navbar, opened with the bars button (navbar), instead of
   sb-admin's 90px icon column. Wide tables and tab bars scroll sideways inside their card, not the page. */
@media (max-width: 767.98px) {
  body #wrapper { flex-direction: column !important; flex-shrink: 0 !important; } /* body: beats the inline row rule in communal's header */
  .sidebar, .sidebar.toggled { display: none !important; }
  .sidebar.mobile-open { display: block !important; width: 100% !important; min-height: 0 !important; height: auto !important; position: static !important; }
  .sidebar.mobile-open .nav-item .nav-link { width: auto !important; text-align: left !important; padding: .7rem 1rem !important; }
  .sidebar.mobile-open .nav-item .nav-link i { margin-right: .5rem; font-size: 1rem !important; }
  .sidebar.mobile-open .nav-item .nav-link span { display: inline !important; font-size: 1rem !important; }
  .sidebar.mobile-open .nav-item .dropdown-menu { position: static !important; transform: none !important; float: none;
                                                  width: auto; margin: 0 1rem .5rem 2.5rem !important; }
  .sidebar.mobile-open .sidebar-heading, .sidebar.mobile-open .side-head { display: block !important; }

  /* the page scrolls, not a box inside it (overflow-x: hidden made #content-wrapper a scroll box), and the footer
     follows the content instead of floating over it */
  #wrapper #content-wrapper { overflow: visible !important; overflow-x: clip !important; padding-bottom: 0 !important; }
  footer.sticky-footer { position: static !important; height: auto !important; }
  #content-wrapper > .container-fluid { padding-left: .75rem; padding-right: .75rem; }
  .card-body > table.table, .card-body > .table, .dataTables_wrapper { display: block; overflow-x: auto; }
  .module-tabs, .module-subtabs, .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
  .btn-toolbar, .btn-group { flex-wrap: wrap; }
  .form-control-sm, .custom-select-sm { font-size: 1rem; } /* under 16px makes phones zoom in on focus */
  .modal-dialog { margin: .5rem; }
  .navbar-brand { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
}