/* locust's own stylesheet: a tracker on a phone ("A tracker on a
 * phone" in docs/plan.md).
 *
 * MantisBT 2.28's markup is Bootstrap 3 and Ace, so it already carries
 * the viewport meta, a grid and a collapsing sidebar, and locust ships
 * all of it.  What is missing is the dozen places where a fixed width,
 * a two-column table or a toolbar full of buttons defeats what the grid
 * would otherwise do.  This file is those places and nothing else: it
 * is linked after ace-mantis.css so that it can override without
 * !important, and it is locust's own file rather than rules appended to
 * a vendored MantisBT asset, which would have to be merged by hand at
 * every MantisBT update.
 *
 * No JavaScript: media queries, flex and position: sticky, as the rest
 * of locust works without script.  The breakpoints are Bootstrap 3's
 * own (768, 992, 1200) so that these rules and the col-xs/col-md
 * classes already in the markup agree instead of fighting; the phone
 * being designed for is 360 to 430 CSS pixels.
 *
 * Two classes are locust's and are invisible to compat/compare.py: an
 * element whose class list holds `lc-wrap` is unwrapped by the
 * comparison's tokenizer (it is dropped while its children are
 * compared), and any class beginning `lc-` is stripped from an
 * element's class attribute.  So layout may move while what a page
 * *says* stays compared byte for byte.
 */

/* A scroller for something that cannot stack: the comparison unwraps
 * the element, so this div is layout and nothing else. */
.lc-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  /* ------------------------------------------------------------------
   * The chrome: the page itself, the toolbars and the footer.
   */
  body {
    overflow-x: hidden;
  }
  .main-content,
  .page-content {
    padding-left: 8px;
    padding-right: 8px;
  }
  /* A toolbar full of buttons wraps into rows instead of overflowing;
   * the floats inside it are what would otherwise pile up. */
  .widget-toolbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
  }
  .widget-toolbox > *,
  .widget-toolbox .btn,
  .widget-toolbox form {
    float: none !important;
    margin-left: 0;
    margin-right: 0;
  }
  /* The buttons under an issue and in the filter box, which MantisBT
   * lays out with pull-left on every one of them. */
  .btn-group > .pull-left,
  .btn-group > .pull-right {
    float: none !important;
    display: inline-block;
  }
  .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .widget-header > .widget-toolbar {
    position: static;
    display: block;
    text-align: right;
  }
  /* Nothing a thumb can reach is narrower than the thumb. */
  .btn,
  .btn-sm,
  .btn-xs {
    min-height: 32px;
  }

  /* ------------------------------------------------------------------
   * A table that is a form stacks.  MantisBT builds every form as a
   * two-column table of td.category and its value, which at 390px is a
   * label column four characters wide; under the breakpoint both cells
   * become full-width blocks, the label above its field.  The rule
   * needs a parent selector, so it is :has(): a browser without it
   * keeps today's layout, which is a sideways scroll and not a broken
   * page.
   */
  table:has(> tbody > tr > .category),
  table:has(> tbody > tr > .category) > tbody,
  table:has(> tbody > tr > .category) > tbody > tr,
  table:has(> tbody > tr > .category) > tbody > tr > td,
  table:has(> tbody > tr > .category) > tbody > tr > th {
    display: block;
    width: auto;
  }
  table:has(> tbody > tr > .category) > tbody > tr {
    border-bottom: 1px solid #e3e3e3;
    padding: 2px 0;
  }
  table:has(> tbody > tr > .category) > tbody > tr > td,
  table:has(> tbody > tr > .category) > tbody > tr > th {
    border: 0;
    padding: 3px 6px;
  }
  table:has(> tbody > tr > .category) > tbody > tr > .category {
    padding-bottom: 0;
    font-weight: bold;
    background: transparent;
  }
  /* A field is as wide as the screen, not as wide as its size= says. */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  select,
  textarea {
    max-width: 100%;
  }
  .input-sm,
  .form-control {
    max-width: 100%;
  }

  /* ------------------------------------------------------------------
   * A table that is a list scrolls, with its first column held, so a
   * row can be read while scrolling sideways.  MantisBT's own
   * .table-responsive wrappers are where most of these already are;
   * .lc-wrap is locust's where there is none.
   */
  .table-responsive,
  .lc-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive > table > thead > tr > th:first-child,
  .table-responsive > table > tbody > tr > td:first-child,
  .lc-wrap > table > thead > tr > th:first-child,
  .lc-wrap > table > tbody > tr > td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #fff;
  }
  /* ... except where the table is a form after all: a stacked row has
   * no first column to hold. */
  .table-responsive > table:has(> tbody > tr > .category) > tbody > tr > td:first-child {
    position: static;
    background: transparent;
  }

  /* ------------------------------------------------------------------
   * locust's own wide things: a six-month plan or a month of a
   * timesheet squeezed into 390px is a grey rectangle, so they keep a
   * minimum width inside their scroller and are read by scrolling.
   */
  .lc-wrap > svg {
    min-width: 760px;
  }
  table.lc-grid {
    min-width: 760px;
  }

  /* A chart already scales: chart.rs writes a viewBox and a width of
   * 100%, so this only stops a tall one from pushing the page
   * sideways.  Nothing here is outside the breakpoint, because
   * `height: auto` on a viewBox would change what a desktop sees. */
  svg.locust-chart {
    max-width: 100%;
  }

  /* The login box and the signup box, which Ace gives a fixed width. */
  .login-container,
  .login-box {
    width: auto;
    max-width: 100%;
  }
}