/*
 * product-mobile.css — /labs/products/ on phones (≤767px): the host shell only.
 *
 * The product grid itself is the React island, which carries its own mobile
 * layout (web/apps/products-grid/src/styles.css). This file covers what sits
 * outside the island: product.less's desktop body min-width, the 45px left
 * rail, the fixed header and the SSE notification box. Desktop is untouched —
 * every rule is inside the media query.
 *
 * Plain CSS on purpose, with no sibling .less: FileResolver compiles a .less on
 * request, and www-data cannot write into assets/stylesheets/ on B3/C, so a new
 * .less there is served as a 404 (FIX-1843). This file is the source.
 *
 * The left rail is hidden rather than turned into a drawer: the header
 * hamburger (#MainMenu) is the single mobile menu, per Jun 2026-07-07
 * ("don't add a second menu icon next to the hamburger").
 */

@media (max-width: 767px) {
  html body {
    min-width: 0; /* product.less: body { min-width: 1278px } */
  }

  #leftMainMenu {
    display: none;
  }

  /* Fixed header: 94px with 26/16px inline margins on desktop → a 52px app bar. */
  #header #header {
    height: 52px !important;
  }

  #header #header > .col-xs-12 {
    height: 52px;
  }

  #header #header > .col-xs-12 > .col-xs-12 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* new_header.php hides both logos below 768px; bring back the desktop one, smaller. */
  #header #header a.block.hidden-md.hidden-sm.hidden-xs {
    display: block !important;
    padding: 11px 0 0 14px;
  }

  #header #header a.block.hidden-md.hidden-sm.hidden-xs img {
    height: 30px;
    width: auto;
  }

  #header #header #sideMenuBar {
    top: 0;
    height: 52px;
  }

  #header #header #btnMainMenu {
    height: 52px;
    padding: 0 16px;
    line-height: 52px;
  }

  /* SSE notification box: 500px wide at bottom-right on desktop. */
  #sse_message_box {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    width: auto !important;
  }
}