/* ============================================================
   HomePlus brand theme — black (chalkboard texture) + green.
   Loaded AFTER style.css / main-style.css so these override the
   original blue palette. Brand green ~ #8CC63F.
   Design: dark textured chrome, light content area, green used
   ONLY for active menu + buttons (no clashing green lines).
   ============================================================ */

:root{
  --hp-black:   #141414;
  --hp-black-2: #1b1b1b;
  --hp-green:   #8CC63F;
  --hp-green-d: #6f9e30;
  --hp-gray:    #BFBFBF;   /* neutral gray for category tiles, location bars, history rows */
  --hp-tex: url("../img/txt_background.avif");
}

/* ---- Top navbar (textured, no green underline) ---- */
#navbar,
.navbar-default{
  background: var(--hp-black) var(--hp-tex) center/cover no-repeat !important;
  border: 0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.navbar-brand img{ height: 44px; width:auto; }
.navbar-top-links > li > a{ color:#fff !important; }
.navbar-top-links > li > a:hover,
.navbar-top-links > li > a:focus{ color: var(--hp-green) !important; }
.navbar-top-links .open > a,
.nav .open > a:hover,
.nav .open > a:focus{ background-color: rgba(140,198,63,.15) !important; color: var(--hp-green) !important; }
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus{ background-color: var(--hp-green) !important; color: var(--hp-black) !important; }

/* ---- Sidebar (textured) ---- */
#wrapper{ background: var(--hp-black) !important; }
.navbar-static-side,
#side-menu{
  background: var(--hp-black-2) var(--hp-tex) center/cover no-repeat !important;
}
.navbar-static-side ul li{ border-bottom:1px solid rgba(255,255,255,.06) !important; }
#side-menu a{ color:#e9e9e9 !important; border-bottom:1px solid rgba(255,255,255,.06) !important; }
.nav > li > a:hover,
.nav > li > a:focus,
#side-menu a:hover,
#side-menu a:focus{ background-color: var(--hp-green) !important; color: var(--hp-black) !important; }
.selected,
.nav .active > a{ background-color: var(--hp-green) !important; color: var(--hp-black) !important; }

/* user panel — subtle, no bright divider line */
.user-section{ background: rgba(0,0,0,.35) !important; }
.user-info, .user-text-online{ color:#fff !important; }

/* ---- Page headers: subtle neutral rule, NOT green ---- */
.page-header{ border-bottom:1px solid #e3e3e3; }

/* ---- Buttons: brand the primary/success actions green ---- */
.btn-primary,
.btn-success{
  background-color: var(--hp-green) !important;
  border-color: var(--hp-green-d) !important;
  color: var(--hp-black) !important;
  font-weight:600;
}
.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-success:focus{
  background-color: var(--hp-green-d) !important; border-color:#5c8a26 !important; color:#fff !important;
}
.btn-info{ background-color:#333 !important; border-color:#222 !important; color:#fff !important; }
.btn-info:hover, .btn-info:focus{
  background-color: var(--hp-green) !important; border-color:var(--hp-green-d) !important; color:var(--hp-black) !important;
}

/* ---- Recolor leftover inline blues so pages are cohesive ---- */
/* side filter panels (inline blues: #0273C6 vendors, #0048A4 seasons) */
[style*="#0273C6"], [style*="#0273c6"],
[style*="#0048A4"], [style*="#0048a4"]{ background:#1b1b1b !important; color:#fff !important; }
[style*="#0273C6"] a, [style*="#0273c6"] a,
[style*="#0048A4"] a, [style*="#0048a4"] a{ color: var(--hp-green) !important; }
/* convertxlsdata table header (inline background:#9CF) -> dark header */
[style*="#9CF"], [style*="#9cf"]{ background:#2b2b2b !important; color:#fff !important; }
/* section labels (Bootstrap .label-info light blue) */
.label-info{ background-color: var(--hp-green-d) !important; color:#fff !important; }
/* per-item location/quantity bar (inline background-color:lightblue) -> neutral gray */
[style*="lightblue"]{ background-color: var(--hp-gray) !important; }

/* ---- Unified light neutral gray for data panels (less "greige") ---- */
#cont .col > div{ background: var(--hp-gray) !important; }   /* category-code tiles (was beige #eee) */
#cont.codebold a{ font-weight:500; }                        /* medium-weight main category / vendor codes */

/* ---- Content text colors: replace the leftover Bootstrap blue ---- */
#page-wrapper a, #cont a{ color:#141414; }                  /* content links -> black */
#page-wrapper a:hover, #cont a:hover{ color: var(--hp-green-d); }
.btn-link{ color: var(--hp-green-d) !important; }            /* Make DEL / History / Order History -> green */
.btn-link:hover{ color: var(--hp-green) !important; }
/* "On PO: n" — green, dark gray on hover (rendered either as a bare <a> or as a
   .tooltip2 div, so both carry .hp-onpo) */
.hp-onpo,
#cont a.hp-onpo, #page-wrapper a.hp-onpo{ color: var(--hp-green-d) !important; }
.hp-onpo:hover,
#cont a.hp-onpo:hover, #page-wrapper a.hp-onpo:hover{ color:#4d4d4d !important; }

/* inline blue emphasis numbers (font color="#3C7EB8") -> green accent */
font[color="#3C7EB8"], [color="#3C7EB8"], [style*="#3C7EB8"]{ color: var(--hp-green-d) !important; }
/* the category-code / sub-category header link stays readable black */
.page-header a{ color:#141414 !important; }
.page-header a:hover{ color: var(--hp-green-d) !important; }

/* ---- History drop-down: was all blue (#6666ff text, #dae6f1 rows) -> grey/black ---- */
.historydetails{
  color:#141414 !important;
  border:2px solid var(--hp-gray) !important;
  background-color:#fff !important;
}
.historyitemhead{
  color:#141414 !important;
  font-weight:600;
  border-top:2px solid #141414 !important;
  border-bottom:1px solid var(--hp-gray) !important;
}
.historyitemodd{  color:#141414 !important; background-color: var(--hp-gray) !important; }
.historyitemeven{ color:#141414 !important; background-color:#fff !important; }
/* dates / values inside the history panel were inheriting the blue link colour */
.historydetails a{ color:#141414 !important; }
.historydetails a:hover{ color: var(--hp-green-d) !important; }

/* ---- Item cards: keep the grid from breaking on short cards ----
   The cards are floated Bootstrap columns. When an item is missing from
   IM_ITEM the joined fields come back empty, fewer rows render, and the short
   card snags the next one as it floats past -- which is what makes the layout
   jump. Two layers:
     1. inline-block (all browsers): wrapping no longer depends on height, so
        the grid can't snag even if the cards stay ragged.
     2. flex on the containing .row (:has-capable browsers): cards in a row
        stretch to the same height, so short cards line up too. */
.itemclass{
  float:none !important;
  display:inline-block;
  vertical-align:top;
}
.row:has(> .itemclass){
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  /* REQUIRED. display:flex establishes a block formatting context, and a BFC
     must not overlap floats -- so on any page where floated Bootstrap columns
     sit above this row (the summary / "Sort by" columns on itemdetails.php,
     search*.php, season.php ...) the row shrank to the sliver of space beside
     them: width 0, shoved to the right edge, cards 6px wide.
     poitems.php has no floated sibling above the grid, which is why the bug
     stayed hidden when this rule was first added. */
  clear: both;
}
.row:has(> .itemclass) > .itemclass{ display:block; }

/* ---- Login page (textured) ---- */
/* Login logo: the source art is 16 MP and nothing constrained it, so it rendered
   at natural size and blew the page apart. Cap it and centre it. */
#logolarge img, #logosmall img{
  max-width: 100%;
  width: 340px;
  height: auto;
  margin: 0 auto 1.2em;
  display: block;
}
@media (min-width: 768px){
  #logolarge img, #logosmall img{ width: 420px; }
}

.body-Login-back{
  background: var(--hp-black) var(--hp-tex) center/cover no-repeat fixed !important;
}
.login-panel .panel-heading{ background: var(--hp-black) !important; border-color:#333 !important; }
.login-panel .panel-title{ color: var(--hp-green) !important; }
.login-panel.panel-default{ border-color:#333 !important; }