/* PHONE LAYOUT FIXES (screens up to 600px wide)
   Loaded after every other stylesheet. Rules apply only inside the media query,
   so tablet and desktop layouts are unchanged. */

@media (max-width: 600px) {

  /* --- Header: one compact row with the logo on the left, menu button on the right --- */
  #autocollapse > .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 12px !important; /* main.css forces 1px side padding with !important */
  }

  #autocollapse > .container::before,
  #autocollapse > .container::after {
    display: none;
  }

  #autocollapse > .container > .navbar-brand {
    order: 1;
    flex: 1 1 auto;
    height: 56px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  #autocollapse .navbar-header {
    order: 2;
    margin: 0;
  }

  #autocollapse .navbar-toggle {
    float: none;
    display: block;
    width: 44px;
    height: 44px;
    margin: 6px 0;
    padding: 12px 11px;
  }

  #autocollapse .navbar-collapse {
    order: 3;
    flex-basis: 100%;
  }

  /* --- "Show / Hide Table of Contents" bar: compact and themed --- */
  .sidenav {
    margin: 0;
    padding: 0;
    background-color: var(--side-bar-bg-color);
  }

  .sidenav .toc-toggle {
    margin: 0;
    padding: 10px 16px;
  }

  /* --- Article: remove stacked side padding so text uses the screen width --- */
  .body-content {
    padding: 0 16px;
  }

  .article {
    margin: 16px 0 48px !important; /* docfx.css sets margin-top with !important */
    padding: 0;
  }

  .article > [class*="col-"] {
    padding: 0;
  }

  article {
    margin: 0;
    padding: 0;
  }

  /* --- Tables: let cells wrap so narrow tables fit; wide ones still scroll sideways --- */
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > td {
    white-space: normal;
    min-width: 7em;
  }
}