/* ===== Superior Wash: HomeBox home-page customization ===== */

/* Hide the four dashboard sections, but ONLY on the home page. */
html.hb-home section { display: none !important; }

/* Safety net: never hide anything inside a Create/Edit popup. The script
   already switches the whole customization off while a popup is open; this
   covers the split second before it notices. More specific than the rule
   above, so it wins. */
html.hb-home [role="dialog"] section,
html.hb-home [role="alertdialog"] section,
html.hb-home dialog section { display: revert !important; }

/* Hide the original top-right search group on the home page (tagged by JS),
   so there is only one search box (our centered one). */
html.hb-home .hb-hide-orig { display: none !important; }

/* Hidden by default; shown + centered only on the home page. */
#hb-title, #hb-search { display: none; }

/* Centered title above the search box.
   z-index 10 keeps us BELOW HomeBox's own layers (its popups and menus run up
   to z-index 50-60). At 60 we sat on top of the Create Item window and covered
   its buttons. Nothing else is visible on the home page, so 10 is plenty. */
html.hb-home #hb-title {
  display: block;
  position: fixed;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  font-size: 26px;
  font-weight: 600;
  opacity: 0.85;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
}

/* Our own centered search box (wired to HomeBox's item search). */
html.hb-home #hb-search {
  display: flex;
  position: fixed;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: min(640px, 92vw);
  gap: 8px;
  align-items: center;
}
html.hb-home #hb-search input {
  flex: 1 1 auto;
  height: 50px;
  font-size: 18px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  outline: none;
  background: #ffffff;
  color: #111111;
}
html.hb-home #hb-search button {
  height: 50px;
  padding: 0 20px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  background: #4a5d4f;
  color: #ffffff;
}

/* ===== Nudged right of centre =====
   On a tablet the search box sat on top of the Tools button in the navigation
   down the left-hand side. So both the title and the box are shifted right of
   centre. The shift and the width are capped against the viewport so the box
   can never run off the right edge on a narrower screen: at the tightest case
   (768px wide) the box ends at ~760px, still on screen. Nudge SHIFT up or down
   if it needs to clear more or less. */
html.hb-home #hb-title,
html.hb-home #hb-search { margin-left: min(90px, 10vw); }   /* the shift */

html.hb-home #hb-search { width: min(600px, 78vw); }        /* was 640px / 92vw */