/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 *
 * Brand colour and type are not here -- they are in theme.css, which loads
 * between the vendored Bootstrap and this file. What is left below is
 * app-specific: layout odds and ends with nowhere better to live.
 */

legend {
  /* Bootstrap has the legend floating by default in reboot.scss */
  float: none;
}

.fs-7 {
  font-size: 0.9rem;
}

.fs-8 {
  font-size: 0.8rem;
}

.form-control.file {
  padding: 0;
  height: auto;
}

@media (min-width: 768px) {
  .logo {
    width: 25% !important;
  }
}

.priority-btn-hover:hover {
  opacity: 1 !important;
}

/*
 * The :thumb variant is resize_to_limit, so it keeps its aspect ratio and a
 * wide photo arrives shorter than it is tall. Crop to the square the card
 * reserves rather than letting the row heights wander. object-fit utilities
 * are Bootstrap 5.3 and the vendored build here is 5.2.1.
 */
.log-card-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
}

/*
 * The card footer only says who filed the log, so it should sit behind the
 * card's own content. .text-muted is no use for that here: theme.css remaps it
 * to $secondary-dark for AA on white, which against the footer's near-white cap
 * is about 9:1 and reads as body copy. This is the lightest grey that still
 * clears 4.5:1 on that background (4.9:1). The site's own $secondary, #80818C,
 * would be 3.6:1 -- under AA, which is why AGENTS.md says not to use it for
 * text. The markup carries no .text-muted, because that rule is !important and
 * would win.
 */
#issues-cards .card-footer {
  color: #6A6C79;
}

@media print {
  /*
   * .table-responsive scrolls on screen. On paper there is nothing to scroll,
   * so overflow-x: auto only clips whatever sits past the sheet's edge --
   * silently, and the print sheet renders every log rather than a page of
   * them. Visible puts it back to running off the edge, which is what the
   * unwrapped table did.
   */
  .table-responsive {
    overflow: visible !important;
  }
}

@media (max-width: 767.98px) {
  .btn-group.actions-stack {
    width: 100%;
  }

  /*
   * The filter bar stacks below md, so each control is stretched to the full
   * width. Bootstrap gives every .btn in a group flex: 1 1 auto and a nested
   * .btn-group none, so in the period control -- a dropdown joined to the gear
   * -- the gear would take all the slack. Hand it to the dropdown instead.
   */
  .filter-bar .btn-group > .btn-group { flex: 1 1 auto; }
  .filter-bar .btn-group > .btn-group + .btn { flex: 0 0 auto; }

  /*
   * A filter nobody has set waits behind "More". Bootstrap only supplies the
   * hidden half of .collapse, so the shown half is set here rather than with a
   * d-flex utility -- that carries !important and would beat
   * .collapse:not(.show), leaving the filters permanently visible.
   */
  .filter-more.show { display: flex; }
  .filter-more.show > .btn-group { flex: 1 1 auto; }

  /*
   * A log card is a flex row and its text column the flex item that has to
   * give. A flex item's min-width is auto, so a description with no space in
   * it -- a URL, a part number -- sets the column's floor at its own width and
   * pushes the row past the viewport, which is the horizontal scroll the card
   * list exists to get rid of.
   */
  .log-card-body { min-width: 0; }

  /*
   * A location, a company and the "other" subcategory are all free text off a
   * public form, so a badge can hold a long unbroken run with nowhere to wrap.
   * .badge ships white-space: nowrap, which no amount of wrapping opportunity
   * gets past, so that comes off first; overflow-wrap: anywhere -- unlike
   * break-word -- then also lowers the badge's min-content width, which is the
   * floor the flex row is sized against.
   */
  #issues-cards .badge {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (min-width: 768px) {
  /*
   * From md up every filter shows and the bar keeps its fixed order, so the
   * wrappers have to stop being boxes: display: contents drops them out of the
   * layout and leaves each dropdown a direct child of the row. Without it the
   * set filters would bunch ahead of the unset ones and the controls would
   * shuffle under the pointer as you filtered.
   */
  .filter-more { display: contents !important; }
}