html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Brand palette — ported from the legacy warehouse site (Site.css / default.skin):
   black navigation, orange (#ff9800) accent, light-grey body, white content panels.
   Applied through Bootstrap 5.3 CSS variables so light + dark modes both follow it.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --pp-orange: #ff9800;
  --pp-orange-hover: #e88a00;
  --pp-orange-active: #d97f00;
  --pp-orange-ink: #a05c00;   /* AA-readable orange for links/text on white (~5:1) */
  --pp-orange-ink-dark: #ffb74d; /* readable orange for text on dark surfaces */
  --pp-nav-bg: #0d0d0d;       /* legacy black menus */
  --pp-maroon: #980000;       /* legacy pre-footer accent */
}

/* Orange is the primary accent in BOTH modes (theme-independent). */
:root {
  --bs-primary: var(--pp-orange);
  --bs-primary-rgb: 255, 152, 0;
}

/* Light mode ONLY: grey body with white panels + the darker orange ink for text/links.
   IMPORTANT: do not put these on :root — site.css loads after Bootstrap, so a :root rule would
   out-cascade Bootstrap's [data-bs-theme="dark"] surface vars and leave dark mode looking light. */
[data-bs-theme="light"] {
  --bs-link-color: var(--pp-orange-ink);
  --bs-link-color-rgb: 160, 92, 0;
  --bs-link-hover-color: #7a4600;
  --bs-link-hover-color-rgb: 122, 70, 0;
  --bs-body-bg: #e9e9e9;
  --bs-body-bg-rgb: 233, 233, 233;
  --bs-tertiary-bg: #f3f3f3;
}
/* Tables and cards are the white "content panels" on the grey body. */
[data-bs-theme="light"] .table {
  --bs-table-bg: #ffffff;
}
[data-bs-theme="light"] .card {
  --bs-card-bg: #ffffff;
}
/* White inputs on the grey body had a near-invisible default border (#dee2e6 ≈ the body grey). Darken the
   form-control / select / input-group borders so fields read clearly in light mode. */
[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select,
[data-bs-theme="light"] .input-group-text {
  border-color: #aab0b6;
}

/* Dark mode keeps Bootstrap's dark surfaces; only the link accent is re-tinted (lighter orange). */
[data-bs-theme="dark"] {
  --bs-link-color: #ffb74d;
  --bs-link-color-rgb: 255, 183, 77;
  --bs-link-hover-color: #ffcc80;
  --bs-link-hover-color-rgb: 255, 204, 128;
}

/* Primary buttons: orange with dark ink (white-on-orange fails contrast). */
.btn-primary {
  --bs-btn-bg: var(--pp-orange);
  --bs-btn-border-color: var(--pp-orange);
  --bs-btn-color: #1a1a1a;
  --bs-btn-hover-bg: var(--pp-orange-hover);
  --bs-btn-hover-border-color: var(--pp-orange-hover);
  --bs-btn-hover-color: #1a1a1a;
  --bs-btn-active-bg: var(--pp-orange-active);
  --bs-btn-active-border-color: var(--pp-orange-active);
  --bs-btn-active-color: #1a1a1a;
  --bs-btn-disabled-bg: var(--pp-orange);
  --bs-btn-disabled-border-color: var(--pp-orange);
  --bs-btn-disabled-color: #1a1a1a;
}
/* `.text-bg-primary` (e.g. dashboard tiles) defaults to white text on the primary colour; on orange that
   fails contrast, so paint it with dark ink instead. */
.text-bg-primary {
  color: #1a1a1a !important;
  background-color: var(--pp-orange) !important;
}
.btn-outline-primary {
  --bs-btn-color: var(--pp-orange-ink);
  --bs-btn-border-color: var(--pp-orange);
  --bs-btn-hover-bg: var(--pp-orange);
  --bs-btn-hover-border-color: var(--pp-orange);
  --bs-btn-hover-color: #1a1a1a;
  --bs-btn-active-bg: var(--pp-orange);
  --bs-btn-active-border-color: var(--pp-orange);
  --bs-btn-active-color: #1a1a1a;
}
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #ffb74d;
}
/* Pagination active page = orange with dark ink. */
.pagination {
  --bs-pagination-color: var(--pp-orange-ink);
  --bs-pagination-hover-color: #8a5200;
  --bs-pagination-active-bg: var(--pp-orange);
  --bs-pagination-active-border-color: var(--pp-orange);
  --bs-pagination-active-color: #1a1a1a;
}
[data-bs-theme="dark"] .pagination {
  --bs-pagination-color: #ffb74d;
}
/* Brand wordmark in the (black) navbar uses the orange accent. */
.navbar .navbar-brand {
  color: var(--pp-orange);
}
.navbar .navbar-brand:hover {
  color: var(--pp-orange-hover);
}
/* `.text-primary` would otherwise paint the vivid orange (~2:1 on white). Use the darker ink on light
   surfaces and the lighter orange on dark surfaces so brand-coloured text stays AA-readable. */
[data-bs-theme="light"] .text-primary { color: var(--pp-orange-ink) !important; }
[data-bs-theme="dark"]  .text-primary { color: var(--pp-orange-ink-dark) !important; }
/* Active top-menu item: orange on the black bar (high contrast) in both modes. */
.navbar[data-bs-theme="dark"] .navbar-nav .nav-link.active,
.navbar[data-bs-theme="dark"] .navbar-nav .show > .nav-link {
  color: var(--pp-orange);
}
/* Keep each top-level item (icon + label) on one line — never break the label under its icon. */
.navbar-expand-xxl .navbar-nav .nav-link {
  white-space: nowrap;
}
/* The top menu is wide (10 icon groups); tighten link/brand spacing on the horizontal range so the whole bar —
   icons, the menu, and the username + Sign out cluster — fits without overflowing. Below xxl it's a burger. */
@media (min-width: 1400px) {
  .navbar-expand-xxl .navbar-nav .nav-link {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }
  .navbar .navbar-brand {
    font-size: 1.05rem;
  }
}
/* Trim the gap between a section icon and its label so icons cost little horizontal space. */
.navbar-nav .nav-link > .material-icons {
  margin-right: 0.2rem !important;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem rgba(255, 255, 255, 0.6), 0 0 0 0.25rem rgba(255, 152, 0, 0.55);
}

/* Material icon used as a leading cue in card headers / page headings — subtle and aligned to the text. */
.material-icons.mi-head {
  font-size: 1.15rem;
  vertical-align: -0.18em;
  margin-right: 0.4rem;
}
h1 .material-icons.mi-head, h2 .material-icons.mi-head { font-size: 1.4rem; }

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* ── Legacy-style multi-level navbar menus ──
   The old warehouse menu opened on hover and flew nested submenus out to the side. Bootstrap 5 has no
   native multi-level dropdowns, so: hover opens both levels on desktop; a click handler in site.js
   toggles .show for touch/small screens. NOTE: do NOT put overflow on .dropdown-menu — it clips the
   flyout submenus (which are positioned at left:100%). */
.navbar-nav .dropdown-menu {
  margin-top: 0; /* close the hover gap between the nav link and its menu */
}
.dropdown-submenu {
  position: relative;
}
.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -0.4rem;
  margin-left: 0.1rem;
}
.dropdown-submenu > a.dropdown-toggle {
  /* leave room for the right-pointing caret */
  padding-right: 1.6rem;
}
.dropdown-submenu > a.dropdown-toggle::after {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  border-top: 0.3em solid transparent;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
  border-right: 0;
}
@media (min-width: 992px) {
  /* Open top-level dropdowns and nested submenus on hover, like the legacy site. */
  .navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
  }
  .dropdown-submenu:hover > .dropdown-menu {
    display: block;
  }
}
/* Click-opened submenus (touch / small screens) keep their state via .show. */
.dropdown-submenu > .dropdown-menu.show {
  display: block;
}

/* ── Reusable autocomplete typeahead dropdown ── */
.pp-autocomplete {
  position: relative;
}
.pp-autocomplete-menu {
  position: absolute;
  z-index: 1080;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  display: none;
}
.pp-autocomplete-menu.show {
  display: block;
}
.pp-autocomplete-item {
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.pp-autocomplete-item:last-child {
  border-bottom: 0;
}
.pp-autocomplete-item.active,
.pp-autocomplete-item:hover {
  background-color: var(--pp-orange);
  color: #1a1a1a;
}
.pp-autocomplete-empty {
  padding: 0.4rem 0.75rem;
  color: var(--bs-secondary-color);
  font-size: 0.85rem;
}

/* ── Sortable grid headers ── */
th.pp-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
th.pp-sortable:hover {
  background-color: var(--bs-tertiary-bg);
}
th.pp-sortable .pp-sort-ind {
  font-size: 0.75em;
  color: var(--pp-orange-ink);
}
[data-bs-theme="dark"] th.pp-sortable .pp-sort-ind {
  color: var(--pp-orange-ink-dark);
}

/* Re-theme Bootstrap's fixed-light utilities under dark mode (they don't follow data-bs-theme by default). */
[data-bs-theme="dark"] .bg-light {
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] .table-light {
  --bs-table-bg: var(--bs-tertiary-bg);
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: var(--bs-border-color);
}
/* Contextual row tints (e.g. table-warning) are fixed-light in BS5.3 and look like a bright band in a dark
   table. Re-tint them to a muted dark amber with light text so they stay legible and on-theme. */
[data-bs-theme="dark"] .table-warning {
  --bs-table-color: #ffe69c;
  --bs-table-bg: #3f3618;
  --bs-table-border-color: #5a4f2a;
  --bs-table-striped-bg: #473d1c;
  --bs-table-striped-color: #ffe69c;
  --bs-table-hover-bg: #4f4421;
  --bs-table-hover-color: #ffe69c;
}

/* ── Channel product images / drag-sort layout ──
   Product logos are usually drawn for a light backing, so the thumbnails keep a light surface — but framed
   as deliberate rounded tiles (border + padding) and softened in dark mode so they don't read as stark white. */
.ch-prod-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: 6px;
  padding: 3px;
}
.ch-prod-img-lg {
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  padding: 4px;
  cursor: grab;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.ch-prod-img-lg:active {
  cursor: grabbing;
}
[data-bs-theme="dark"] .ch-prod-img,
[data-bs-theme="dark"] .ch-prod-img-lg {
  background: #eef1f4;   /* soft light tile keeps logos legible without a glaring white block */
  border-color: #495057;
}
#productLayout {
  min-height: 72px;
}