/* ---------------------------------------------------------------------------
   Mobile/tablet layout fixes for the jobs app.
   LAYOUT ONLY - deliberately contains no colour, font or spacing-theme rules,
   so the existing palette is untouched. Loaded last so it wins over style.css.
   Everything is inside a media query, so the desktop layout is unchanged.
   --------------------------------------------------------------------------- */

/* 1. Bootstrap 3.3.4 has no "ms" grid tier, so the col-ms-* classes used in the
      templates were inert: between 768-991px the layout fell back to col-xs-12
      and the sidebar went full width. Define the missing tier. */
@media (min-width: 768px) and (max-width: 991px) {
  .col-ms-1,  .col-ms-2,  .col-ms-3,  .col-ms-4,
  .col-ms-5,  .col-ms-6,  .col-ms-7,  .col-ms-8,
  .col-ms-9,  .col-ms-10, .col-ms-11, .col-ms-12 {
    position: relative;
    float: left;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
  }
  .col-ms-12 { width: 100%; }
  .col-ms-11 { width: 91.66666667%; }
  .col-ms-10 { width: 83.33333333%; }
  .col-ms-9  { width: 75%; }
  .col-ms-8  { width: 66.66666667%; }
  .col-ms-7  { width: 58.33333333%; }
  .col-ms-6  { width: 50%; }
  .col-ms-5  { width: 41.66666667%; }
  .col-ms-4  { width: 33.33333333%; }
  .col-ms-3  { width: 25%; }
  .col-ms-2  { width: 16.66666667%; }
  .col-ms-1  { width: 8.33333333%; }
}

/* 2. The app has 43 <table> elements and none are wrapped in .table-responsive,
      so wide tables push the whole page sideways on a phone. Let each table
      scroll inside its own box instead of dragging the layout with it. */
@media (max-width: 767px) {
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 3. Keep fixed-width media and long unbroken strings from forcing the page
      wider than the screen. */
@media (max-width: 767px) {
  img, iframe, embed, object, video { max-width: 100%; height: auto; }
  .container, .container-fluid, .row, #job_sidebar, .sidebar, .body { max-width: 100%; }
  .body a, .sidebar a { overflow-wrap: break-word; word-wrap: break-word; }
}