/* ============================================================
   SynetoOS mockup overrides — loaded AFTER the vendored app.css.
   Keep this minimal; it only adjusts demo-specific visuals.
   ============================================================ */

/* Replace the appliance login "mascot" (.bg-white::after) with the SynetoOS
   product render used on the website's SynetoOS page header. Selector mirrors
   app.css (body.security main>.container-fluid>div:after) + .bg-white so it
   wins on specificity. */
body.security main > .container-fluid > div.bg-white::after {
  background-image: url("/images/syneto-os-product.webp") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  width: 220px !important;
  height: 240px !important;
  top: auto !important;
  bottom: 40px !important;
  left: 140px !important;
}

/* DataTables scroll layout (e.g. the /help shortcuts table): the fixed-width
   header/body inner wrappers (~1088px) overflow the page on every viewport
   (desktop included). Contain the widget so its wide table scrolls
   horizontally INSIDE the widget instead of pushing the whole page wider. */
.dt-scroll { max-width: 100% !important; overflow-x: auto !important; }
.dt-scroll-head,
.dt-scroll-foot { overflow-x: visible !important; max-width: none !important; }
.dt-scroll-body { overflow-x: visible !important; max-width: none !important; }

/* Stale Bootstrap tooltips/popovers were captured in the `.show` state at
   absolute coordinates from the 1920px capture viewport (e.g. /help leaves one
   at left:1678px), overflowing narrow screens. We don't drive Bootstrap JS, so
   any present are frozen artifacts — hide them everywhere. */
.tooltip,
.popover { display: none !important; }