/* ============================================================================
   HomePlus - modern UI layer
   ============================================================================
   Loaded AFTER theme-hp.css, so it refines rather than replaces. Remove the one
   <link> in template/headsection.php (and login.php) to revert everything here.

   Scope note: the top navbar and the left sidebar are deliberately left alone -
   the owner asked for those to stay as they are. This layer touches typography,
   the content area, cards, buttons, forms, tables and alerts.

   Two things this must NOT do, learned from the existing markup:
     * no overflow:hidden on .itemclass - the Info / Order History popups are
       absolutely positioned inside the card and would be clipped
     * no transform on .itemclass - it creates a stacking context and those same
       popups can end up painted underneath the neighbouring card
   ========================================================================== */

:root{
  /* surfaces */
  --hp-surface:      #ffffff;
  --hp-surface-2:    #f7f8f7;
  --hp-line:         rgba(20,20,20,.10);
  --hp-line-soft:    rgba(20,20,20,.06);

  /* text */
  --hp-ink:          #16181a;
  --hp-ink-2:        #4a5057;
  --hp-ink-3:        #7b8189;

  /* elevation */
  --hp-shadow-1: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --hp-shadow-2: 0 2px 4px rgba(16,24,40,.06), 0 8px 20px rgba(16,24,40,.08);

  --hp-radius:    10px;
  --hp-radius-sm: 7px;
}

/* ---------------------------------------------------------------- type ---- */
/* System stack: modern on every OS, and nothing to download. */
body,
.form-control,
.btn,
input, select, textarea, button{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body{
  font-size: 14px;
  line-height: 1.55;
  color: var(--hp-ink);
}

h1,h2,h3,h4,h5{
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--hp-ink);
}

#page-wrapper .page-header{
  border-bottom: 1px solid var(--hp-line);
  padding-bottom: .5em;
  margin-top: .2em;
  margin-bottom: .9em;
  font-size: 24px;
}

/* ------------------------------------------------------------ content ----- */
/* Lift the working area off the dark textured wrapper so it reads as a sheet. */
#page-wrapper{
  background: var(--hp-surface-2);
  border-top-left-radius: 14px;
  min-height: calc(100vh - 60px);
  /* The top navbar is position:fixed and 82px tall (it holds the logo), but
     nothing reserved space for it - #page-wrapper started at 55px, so the page
     title sat 27px UNDER the header and was sliced in half on every page. */
  padding-top: 34px;
}

/* --------------------------------------------------------- dark sidebar --- */
/* Text in the sidebar that is not a link - the "Show DEL" checkbox label - has
   no colour of its own, so it inherited the dark body colour and vanished
   against the dark sidebar (#16181a on #1b1b1b). Links were already light. */
.navbar-static-side,
.navbar-static-side .sidebar-search,
.navbar-static-side .sidebar-search div,
.navbar-static-side label{
  color: #e9e9e9;
}

/* --------------------------------------------------------------- cards ---- */
.itemclass{
  background: var(--hp-surface) !important;
  border: 1px solid var(--hp-line-soft) !important;
  border-radius: var(--hp-radius);
  box-shadow: var(--hp-shadow-1);
  transition: box-shadow .18s ease, border-color .18s ease;
  margin-bottom: 1.1em !important;
  padding-bottom: 2px;
}
.itemclass:hover{
  box-shadow: var(--hp-shadow-2);
  border-color: rgba(140,198,63,.55) !important;
}

/* Bootstrap gives .row a -15px margin each side, which assumes a .container
   with matching padding. The card grid has no such container, so the row hung
   30px wider than its parent and pushed the page into a sideways scroll. */
.row:has(> .itemclass){
  margin-left: 0;
  margin-right: 0;
}

/* item image sits flush and calm */
.itemclass image,
.itemclass img{
  border-radius: var(--hp-radius-sm);
}

/* the coloured location/quantity strip at the card foot */
.itemclass [id^="confirm"]{
  border-bottom-left-radius: var(--hp-radius) !important;
  border-bottom-right-radius: var(--hp-radius) !important;
  background: var(--hp-surface-2) !important;
  border-top: 1px solid var(--hp-line-soft);
}

/* category / vendor tiles on the landing pages */
#cont .col > div{
  border-radius: var(--hp-radius-sm);
  border: 1px solid var(--hp-line-soft);
  transition: box-shadow .16s ease, transform .16s ease;
}
#cont .col > div:hover{
  box-shadow: var(--hp-shadow-1);
}

/* ------------------------------------------------------------- buttons ---- */
.btn{
  border-radius: var(--hp-radius-sm);
  font-weight: 550;
  letter-spacing: .01em;
  transition: background-color .15s ease, box-shadow .15s ease,
              border-color .15s ease, color .15s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-sm, .btn-xs{ border-radius: 6px; }

/* Visible keyboard focus - Bootstrap 3 removes it almost everywhere. */
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 2px solid var(--hp-green);
  outline-offset: 2px;
}

/* --------------------------------------------------------------- forms ---- */
.form-control{
  border-radius: var(--hp-radius-sm);
  border: 1px solid var(--hp-line);
  box-shadow: none;
  height: auto;
  padding: 7px 11px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus{
  border-color: var(--hp-green);
  box-shadow: 0 0 0 3px rgba(140,198,63,.18);
}
label{ font-weight: 600; color: var(--hp-ink-2); }
.help-block{ color: var(--hp-ink-3); font-size: 12.5px; }

/* Input groups: .form-control above is 7px vertical padding (36px tall) while a
   Bootstrap .btn is 6px (34px), so the search button sat 2px short of its input
   and looked misaligned. Match them. */
.input-group-btn > .btn{
  padding-top: 7px;
  padding-bottom: 7px;
}
.input-group .form-control:not(:last-child){
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group-btn:last-child > .btn{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* -------------------------------------------------------------- tables ---- */
.table > thead > tr > th{
  border-bottom: 1px solid var(--hp-line) !important;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hp-ink-3);
  font-weight: 650;
}
.table > tbody > tr > td{
  border-top: 1px solid var(--hp-line-soft) !important;
  vertical-align: middle;
}
.table-striped > tbody > tr:nth-of-type(odd){ background-color: #fbfcfb; }
.table-hover > tbody > tr:hover,
.table > tbody > tr:hover{ background-color: #f2f7ec; }

/* ------------------------------------------------------------- alerts ----- */
.alert{
  border-radius: var(--hp-radius);
  border: 1px solid transparent;
  box-shadow: var(--hp-shadow-1);
}
.alert-success{ background:#eef7e6; border-color:#cfe6b8; color:#33691e; }
.alert-info   { background:#eef2f6; border-color:#d3dde7; color:#2b3a47; }
.alert-warning{ background:#fdf5e3; border-color:#f0dfae; color:#7a5b12; }
.alert-danger { background:#fdeeee; border-color:#f3cfcf; color:#8a2020; }

/* --------------------------------------------------------------- misc ----- */
.label{ border-radius: 5px; font-weight: 600; letter-spacing: .02em; padding: .3em .6em; }

/* Popups: softened, and taken out of layout when closed.
   They are 420px wide, absolutely positioned, and were only visibility:hidden -
   which still contributes to the document's scroll width. That is why every
   item page scrolled sideways (1448px of content in a 1265px viewport).
   display:none removes them from layout entirely until hovered. */
.tooltiptext2, .tooltiptext3{
  border-radius: var(--hp-radius-sm) !important;
  box-shadow: var(--hp-shadow-2);
}
.tooltip2 .tooltiptext2,
.tooltip3 .tooltiptext3{ display: none; }
.tooltip2:hover .tooltiptext2,
.tooltip3:hover .tooltiptext3{
  display: block;
  visibility: visible;
  opacity: 1;
}

/* thin scrollbars for the sidebar filter panels */
* { scrollbar-width: thin; }
::-webkit-scrollbar{ width: 9px; height: 9px; }
::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.25);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.4); }
#page-wrapper ::-webkit-scrollbar-thumb{ background: rgba(20,20,20,.22); }

/* ------------------------------------------------------------- login ------ */
.login-panel{
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
.login-panel .panel-heading{ padding: 14px 18px; }
.login-panel .panel-body{ padding: 20px 18px 22px; }
.login-panel .form-control{ padding: 10px 12px; }

/* ============================================================================
   PHONES ONLY (<= 767px). Nothing here applies to tablet/desktop.
   ============================================================================
   Three separate faults were breaking the phone layout:

   1. OFF-SCREEN CONTENT. Bootstrap gives .row a -15px margin each side,
      expecting a container with matching padding. There is none, so every row
      started at x = -14px: page titles were sliced off on the LEFT and the page
      scrolled sideways (389px of content in a 375px viewport).

   2. TEXT ON TOP OF THE IMAGE. Inside a card the image block carries
      "col-sm-12 col-xs-6 col-lg-12", so below 768px it FLOATS at half width -
      but every text row beneath it has only col-sm-* classes, which below
      768px are plain full-width blocks. Un-floated blocks flow underneath a
      float, so the description ran straight over the photo.

   3. CARDS TOO NARROW. .itemclass is col-xs-6, i.e. two cards across a 375px
      phone = 188px each, which is unreadable once the photo is in there.
   ========================================================================== */
@media (max-width: 767px){

  /* 1. keep rows inside the viewport */
  #page-wrapper .row,
  #page-wrapper .row > .row{
    margin-left: 0;
    margin-right: 0;
  }
  #page-wrapper{
    padding-left: 12px;
    padding-right: 12px;
    border-top-left-radius: 0;      /* full-bleed sheet on a phone */
  }

  /* 3. one card per row */
  .itemclass{
    width: 100% !important;
    margin-bottom: 1em !important;
  }

  /* 2. stop the half-width float inside the card */
  .itemclass .col-xs-6{
    width: 100% !important;
    float: none !important;
  }
  .itemclass image,
  .itemclass img{
    max-width: 100%;
    height: auto !important;
    margin: 0 auto;
  }

  /* --- card internals -------------------------------------------------------
     The card markup is written for the col-sm-* grid, so below 768px every one
     of those became a full-width block: the values stacked raggedly down the
     left, and the quantity TOTAL dropped onto its own line instead of sitting
     at the right of the STM/ZEE/WH1/WH2 strip.
     The card is now full width (351px on a 375px phone), so there is room for
     exactly the arrangement the markup already expects - just re-apply the
     widths. */
  .itemclass > .col-sm-2 { width: 16.6667%; float: left; }
  .itemclass > .col-sm-4 { width: 33.3333%; float: left; }
  .itemclass > .col-sm-5 { width: 41.6667%; float: left; }
  .itemclass > .col-sm-6 { width: 50%;      float: left; }
  .itemclass > .col-sm-12{ width: 100%;     float: left; }

  /* floated children would collapse the card's height - clearfix rather than
     overflow:hidden, which would clip the Info / Order History popups */
  .itemclass::after,
  .itemclass [id^="confirm"]::after{
    content: "";
    display: table;
    clear: both;
  }

  /* the quantity strip: four locations then the total on the right */
  .itemclass [id^="confirm"]{
    height: auto !important;
    padding-bottom: 6px;
  }
  .itemclass [id^="confirm"] > .col-sm-2{
    width: 16.6667%;
    float: left;
  }
  .itemclass [id^="confirm"] > .col-sm-4{
    /* inline style sets display:table-cell, which ignores float - override it
       so the total sits on the right of the same row instead of wrapping */
    display: block !important;
    width: 33.3333%;
    float: left;
    text-align: right !important;
    padding-right: 8px;
  }

  /* the image block must stay full width and unfloated (it carries col-xs-6,
     which is what put the description on top of the photo) - this comes after
     the col-sm rules above so it wins */
  .itemclass .col-xs-6{
    width: 100% !important;
    float: none !important;
  }

  /* --- sidebar filter panels ------------------------------------------------
     "Filter by Vendor / Sub-Category / Season" panels are siblings OUTSIDE
     .sidebar-collapse, so when the burger menu collapses on a phone they stay
     visible - a 118px block wedged between the header and the first card.
     Hide them with the menu, and reveal them when the menu is opened. */
  .navbar-static-side > div:not(.sidebar-collapse){ display: none; }
  .navbar-static-side > .sidebar-collapse.in ~ div{ display: block; }

  /* headings shrink so a long "Category Code / Sub-Category Code" pair wraps
     instead of forcing the page wider */
  #page-wrapper .page-header,
  #page-wrapper h1,
  #page-wrapper h3{
    font-size: 19px;
    line-height: 1.3;
    word-break: break-word;
  }

  /* popups are 420px wide - wider than the phone itself */
  .tooltiptext2, .tooltiptext3{
    width: auto !important;
    max-width: 88vw !important;
    left: 0 !important;
    margin-left: 0 !important;
  }

  /* tables scroll inside their own box instead of stretching the page */
  .table-responsive, .hp-usertable{
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Pagination. The page links are emitted joined by &nbsp; ("Page: 1&nbsp;
     &nbsp;2&nbsp;&nbsp;3..."), and a non-breaking space forbids a line break -
     so on a 20-page list the whole strip is one unbreakable line and dragged
     the document out to 558px. Let that strip scroll inside itself. The pager
     divs carry no class, hence the :not([class]) hook; the only other elements
     it matches are empty spacers, which are unaffected. */
  #page-wrapper .row > div:not([class]){
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* comfortable tap targets */
  .btn{ min-height: 38px; }

  /* main-style.css hides #logolarge below 640px and shows #logosmall instead.
     The login page now has a single logo (#logosmall was removed when the 16 MP
     image was replaced), so that old rule left phones with NO logo at all. */
  #logolarge{ display: block !important; }
  #logolarge img{ width: 240px; }
}

/* --------------------------------------------------------- motion pref --- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}