/* OJS backend responsive layout: 990px and below */
@media (max-width: 990px) {
  .app__body {
    display: flex;
    flex-direction: column;
  }

  .app__nav {
    width: 100%;
    flex: 0 0 auto;
    order: 1;
    padding: 0.75rem 1rem;
    border-right: 0;
    border-bottom: 1px solid #ddd;
    overflow-x: visible;
    overflow-y: visible;
  }

  .app__main {
    width: 100%;
    order: 2;
  }

  /*
   * Main nav container
   */
  .app__nav > ul {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
  }

  /*
   * Every main nav item/group gets its own line:
   * Submissions / Issues / Announcements
   * Settings
   * Statistics
   * Tools
   * Administration
   */
  .app__nav > ul > li {
    display: block;
    width: 100%;
    margin: 0;
  }

  /*
   * First-level links
   */
  .app__nav > ul > li > a,
  .app__nav > ul > li > .app__navItem {
    display: inline-block;
    padding: 0.35rem 0.5rem;
    white-space: nowrap;
  }

  /*
   * Submenu rows:
   * Journal Website Workflow Distribution Users & Roles
   * Articles Editorial Activity Users Reports
   */
  .app__navGroup ul,
  .app__nav > ul > li > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.85rem;
    margin: 0.25rem 0 0;
    padding: 0;
  }

  .app__navGroup ul li,
  .app__nav > ul > li > ul > li {
    flex: 0 0 auto;
    margin: 0;
  }

  .app__navGroup ul a,
  .app__nav > ul > li > ul > li > a {
    display: inline-block;
    padding: 0.3rem 0.45rem;
    white-space: nowrap;
  }

  /*
   * If OJS wraps submenu groups in .app__navGroup,
   * keep each group as a block/row instead of flattening everything.
   */
  .app__navGroup {
    display: block;
    width: 100%;
  }

  /*
   * Submission list header actions:
   * prevent Search / Filters / New Submission from being crushed horizontally
   */
  .pkpHeader__actions {
    display: block;
    width: 100%;
  }

  .pkpHeader__actions > * {
    display: block;
    width: 100%;
    margin-bottom: 0.5rem;
  }
}