/* ============================================================================
   InESS BOM — ProcurePilot design system
   Loaded AFTER Metronic style.bundle.css; overrides it deliberately.
   ========================================================================== */

:root {
  /* Brand — blue */
  --pp-brand-50:  #eff5ff;
  --pp-brand-100: #dbe8fe;
  --pp-brand-200: #bfd7fe;
  --pp-brand-400: #60a0fa;
  --pp-brand-500: #3b82f6;
  --pp-brand-600: #2563eb;
  --pp-brand-700: #1d4ed8;
  --pp-brand-800: #17376f;

  /* Surfaces — cool neutrals tuned to the blue brand */
  --pp-page-bg:    #f2f5fb;
  --pp-card-bg:    #ffffff;
  --pp-card-brd:   #dce5f3;
  --pp-line:       #e9eff8;
  --pp-hover:      #f4f8ff;

  /* Table head — blue tint so headers read as structure, not data */
  --pp-th-bg:      #e8f0fe;
  --pp-th-bg-2:    #dde9fd;   /* gradient foot, gives the row a little depth */
  --pp-th-ink:     #1e46a8;
  --pp-th-brd:     #c9dafa;

  /* Ink */
  --pp-ink:        #121a33;
  --pp-ink-2:      #3a4560;
  --pp-ink-3:      #67718d;
  --pp-ink-4:      #97a1b8;

  /* Status */
  --pp-green-bg:   #e6f7ef;  --pp-green-ink:  #0e7a48;
  --pp-amber-bg:   #fdf3e0;  --pp-amber-ink:  #9a6207;
  --pp-red-bg:     #fdeaee;  --pp-red-ink:    #b42340;
  --pp-blue-bg:    #e8f1fe;  --pp-blue-ink:   #1d5fbf;
  --pp-slate-bg:   #f0f1f7;  --pp-slate-ink:  #545a7d;

  /* Shape & depth */
  --pp-r-sm: 8px;
  --pp-r:    12px;
  --pp-r-lg: 16px;
  --pp-r-xl: 22px;
  --pp-sh-1: 0 1px 2px rgba(20, 22, 58, .05);
  --pp-sh-2: 0 4px 14px rgba(20, 22, 58, .07);
  --pp-sh-3: 0 12px 34px rgba(20, 22, 58, .12);

  --pp-font: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pp-font-display: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  --pp-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* Metronic variable overrides so untouched components follow the brand */
  --bs-primary: #2563eb;
  --bs-primary-rgb: 37, 99, 235;
  --bs-body-font-family: var(--pp-font);
  --kt-primary: #2563eb;
  --kt-primary-active: #1d4ed8;
  --kt-primary-light: #eff5ff;
  --kt-text-primary: #2563eb;
  --kt-body-bg: #f2f5fb;
  --kt-border-color: #e5ebf5;
  --kt-card-border-color: #e5ebf5;
}

/* ---------------------------------------------------------------- base ---- */

html, body { background: var(--pp-page-bg) !important; }

body {
  font-family: var(--pp-font) !important;
  color: var(--pp-ink);
  font-size: 13.5px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--pp-font-display);
  color: var(--pp-ink);
  letter-spacing: -.02em;
}

a { text-decoration: none; }

.pp-mono, code, kbd, samp,
.pp-code { font-family: var(--pp-font-mono); font-size: .92em; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d7dae8; border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #bcc1d6; background-clip: content-box; }

/* ================================================================ header == */

.app-header,
.app-header-primary,
.app-header-secondary { background: #fff !important; border: 0 !important; box-shadow: none !important; }

/* Brand row + tool tabs + section nav stay pinned while the page scrolls.
   --pp-header-h is what everything else (sticky table heads) offsets against. */
:root { --pp-header-h: 118px; }

#kt_app_header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--pp-page-bg) !important;
  box-shadow: 0 4px 16px -10px rgba(18, 26, 51, .28) !important;
}

.pp-topbar {
  background: var(--pp-page-bg);
  border-bottom: 1px solid var(--pp-card-brd);
}

/* align-items:flex-end so the tool tabs sit flush on the bar's bottom edge */
.pp-topbar-inner {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  height: 68px;
  padding: 0 26px;
}
.pp-topbar-inner > .pp-brand { margin-bottom: 13px; }
.pp-topbar-inner > .pp-user { margin-left: auto; margin-bottom: 13px; }

/* Brand lockup */
.pp-brand { display: flex; align-items: center; gap: 12px; }

.pp-brand-tile {
  width: 42px; height: 42px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, #e8fbf6 0%, #e3edff 100%);
  border: 1px solid #e4e8f7;
  box-shadow: inset 0 1px 0 #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.pp-brand-tile img { width: 30px; height: 30px; object-fit: contain; }

.pp-brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.pp-brand-name {
  font-family: var(--pp-font-display);
  font-size: 21px; font-weight: 800; letter-spacing: -.03em;
  color: var(--pp-brand-800);
}
.pp-brand-name em { font-style: normal; color: var(--pp-brand-600); }
.pp-brand-sub {
  font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--pp-ink-4); margin-top: 3px;
}

/* Avatar */
.pp-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: 13px; letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(140deg, #ff8a3d, #f2542d);
  box-shadow: 0 2px 8px rgba(242, 84, 45, .28);
  cursor: pointer; user-select: none;
  border: 2px solid #fff;
}

/* ---------------------------------- top-level tool tabs (folder-tab style) --- */

.pp-switch {
  display: flex; align-items: flex-end; gap: 6px;
  height: 100%;
}
.pp-switch-item {
  display: inline-flex; align-items: center;
  padding: 11px 24px 12px;
  border-radius: 12px 12px 0 0;
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
  color: var(--pp-ink-3);
  border: 1px solid transparent;
  border-bottom: 0;
  transition: background-color .15s ease, color .15s ease;
}
.pp-switch-item:hover { color: var(--pp-brand-600); background: rgba(255, 255, 255, .6); }
.pp-switch-item.active {
  /* white tab seated on the white nav row below — reads as one surface */
  background: #fff;
  color: var(--pp-brand-700);
  font-weight: 700;
  border-color: var(--pp-card-brd);
  margin-bottom: -1px;
  padding-bottom: 13px;
}
.pp-switch-item.active:hover { background: #fff; }

@media (max-width: 767.98px) {
  .pp-switch-item { padding: 10px 14px; font-size: 12px; }
  .pp-switch-item.active { padding-bottom: 11px; }
  .pp-topbar-inner { gap: 12px; padding: 0 14px; overflow-x: auto; scrollbar-width: none; }
  .pp-topbar-inner::-webkit-scrollbar { display: none; }
  .pp-brand-sub { display: none; }
  .pp-nav-scroll { padding: 0 14px; }
}

/* -------------------------------------------------------------- nav row --- */

.pp-nav {
  background: #fff;
  border-bottom: 1px solid var(--pp-line);
  box-shadow: 0 1px 3px rgba(20, 22, 58, .04);
}
.pp-nav-scroll {
  display: flex; align-items: stretch; justify-content: center;
  gap: 4px;
  padding: 0 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pp-nav-scroll::-webkit-scrollbar { display: none; }

.pp-nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 15px 15px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  color: var(--pp-ink-3);
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.pp-nav-link svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .85; }
.pp-nav-link:hover { color: var(--pp-brand-600); }
.pp-nav-link.active {
  color: var(--pp-brand-600);
  border-bottom-color: var(--pp-brand-600);
  font-weight: 700;
}

/* Breadcrumb trail — sits above the page toolbar, mirrors the tool/tab the
   pp-nav above already highlights so drill-down pages have a way back. */
.pp-breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 4px 4px;
  font-size: 12.5px;
}
.pp-breadcrumb-link { color: var(--pp-ink-3); font-weight: 600; }
.pp-breadcrumb-link:hover { color: var(--pp-brand-600); text-decoration: underline; }
.pp-breadcrumb-current { color: var(--pp-ink); font-weight: 700; }
.pp-breadcrumb-sep { color: var(--pp-ink-4); }

/* Legacy Metronic menus inside header, if any page still renders them */
.app-content-menu .menu-link {
  font-size: 13px; font-weight: 600; color: var(--pp-ink-3) !important;
  border-radius: 0 !important;
}
.app-content-menu .menu-link.active {
  color: var(--pp-brand-600) !important;
  background: transparent !important;
  box-shadow: inset 0 -2px 0 var(--pp-brand-600);
}

/* User dropdown */
.menu-sub-dropdown {
  border-radius: var(--pp-r-lg) !important;
  border: 1px solid var(--pp-card-brd) !important;
  box-shadow: var(--pp-sh-3) !important;
}

/* ================================================================== hero == */

.pp-hero {
  position: relative;
  margin: 8px 0 8px;
  padding: 12px 24px 13px;
  border-radius: var(--pp-r-xl);
  color: #fff;
  background:
    radial-gradient(115% 130% at 88% 8%, rgba(56, 130, 246, .5) 0%, rgba(56, 130, 246, 0) 55%),
    linear-gradient(118deg, #0f2350 0%, #133071 45%, #0a1a3c 100%);
  box-shadow: 0 14px 34px rgba(12, 30, 70, .24);
}
/* No overflow:hidden on .pp-hero itself — it would clip any dropdown-menu
   opened from a button inside the hero (Add product / Upload BOM) against
   the hero's own box instead of the page. The dot-pattern layer below gets
   its own matching border-radius instead, so it clips itself. */
.pp-hero::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .5; pointer-events: none;
}
.pp-hero > * { position: relative; z-index: 1; }

.pp-hero-eyebrow {
  position: relative;
  display: inline-flex; align-items: center;
  padding-left: 16px;                     /* room for the absolutely placed dot */
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #a8c9f8;
  margin-bottom: 6px;
}
/* Status dot — breathes so "live" reads as live rather than decorative */
.pp-hero-eyebrow::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .22);
  animation: pp-live-dot 2.4s ease-in-out infinite;
}
/* …and a ring that expands out from under it */
.pp-hero-eyebrow::after {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%;
  background: rgba(52, 211, 153, .5);
  animation: pp-live-ring 2.4s ease-out infinite;
  pointer-events: none;
}

@keyframes pp-live-dot {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 3px rgba(52, 211, 153, .22); }
  50%      { opacity: .78; box-shadow: 0 0 0 3px rgba(52, 211, 153, .10); }
}
@keyframes pp-live-ring {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* Someone who asked for less motion gets a plain dot */
@media (prefers-reduced-motion: reduce) {
  .pp-hero-eyebrow::before { animation: none; }
  .pp-hero-eyebrow::after { display: none; }
}

.pp-hero-title {
  font-family: var(--pp-font-display);
  font-size: 20px; font-weight: 800; letter-spacing: -.03em; line-height: 1.12;
  color: #fff; margin: 0 0 3px;
}
.pp-hero-title .pp-accent {
  background: linear-gradient(93deg, #8fc2ff 0%, #bfe3ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pp-hero-sub {
  font-size: 12.5px; font-weight: 500; line-height: 1.45;
  color: rgba(214, 231, 255, .78);
  max-width: 640px; margin: 0;
}

.pp-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pp-hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Stat strip inside hero */
.pp-hero-stats {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 10px;
}
.pp-stat {
  flex: 1 1 170px;
  min-width: 150px;
  padding: 7px 12px 6px;
  border-radius: var(--pp-r-lg);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(4px);
}
.pp-stat-val {
  font-family: var(--pp-font-display);
  font-size: 20px; font-weight: 800; letter-spacing: -.03em; line-height: 1;
  color: #fff;
}
.pp-stat-val small { font-size: 12px; font-weight: 700; color: #a5f3cf; margin-left: 6px; }
.pp-stat-lbl {
  margin-top: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(200, 220, 250, .62);
}
.pp-stat-meter { height: 3px; border-radius: 99px; background: rgba(255, 255, 255, .14); margin-top: 6px; overflow: hidden; }
.pp-stat-meter > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #3b82f6, #60c8fa); }

/* Back out of a drill-down, sits above the hero title */
.pp-hero-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 12px;
  padding: 5px 12px 5px 9px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: 11.5px; font-weight: 700;
  color: rgba(226, 240, 255, .9) !important;
}
.pp-hero-back:hover { background: rgba(255, 255, 255, .18); color: #fff !important; }

/* "Viewing X" context chips under the hero title */
.pp-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.pp-hero-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: 11.5px; font-weight: 600;
  color: rgba(226, 240, 255, .82);
}
.pp-hero-chip strong { color: #fff; font-weight: 800; }

/* Hero buttons sit on dark, so they get their own skins. Both share one
   box-sizing/height/padding rule so the ghost button's 1px border can't
   make it taller than the light button's borderless box. */
.pp-hero .btn-hero-light,
.pp-hero .btn-hero-ghost {
  box-sizing: border-box;
  height: 28px;
  padding: 0 12px;
  font-size: 12px; font-weight: 700;
  border-radius: var(--pp-r);
  display: inline-flex; align-items: center; gap: 6px;
}
.pp-hero .btn-hero-light {
  background: #fff; color: var(--pp-brand-800);
  border: 0;
  box-shadow: 0 3px 12px rgba(8, 24, 60, .24);
}
.pp-hero .btn-hero-light:hover { background: #f4f4ff; color: var(--pp-brand-700); }
.pp-hero .btn-hero-ghost {
  background: rgba(255, 255, 255, .1); color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
}
.pp-hero .btn-hero-ghost:hover { background: rgba(255, 255, 255, .18); color: #fff; }

/* =============================================================== KPI row == */

.pp-kpi-row {
  display: grid; gap: 12px; margin-bottom: 12px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.pp-kpi {
  display: flex; align-items: center; gap: 14px;
  background: var(--pp-card-bg);
  border: 1px solid var(--pp-card-brd);
  border-radius: var(--pp-r-lg);
  padding: 12px 16px;
  box-shadow: var(--pp-sh-1);
}
.pp-kpi-icon {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--pp-brand-50); color: var(--pp-brand-600);
}
.pp-kpi-icon.is-green { background: var(--pp-green-bg); color: var(--pp-green-ink); }
.pp-kpi-icon.is-amber { background: var(--pp-amber-bg); color: var(--pp-amber-ink); }
.pp-kpi-icon.is-red   { background: var(--pp-red-bg);   color: var(--pp-red-ink); }
.pp-kpi-icon.is-blue  { background: var(--pp-blue-bg);  color: var(--pp-blue-ink); }
.pp-kpi-lbl { font-size: 12px; font-weight: 600; color: var(--pp-ink-3); }
.pp-kpi-val {
  font-family: var(--pp-font-display);
  font-size: 24px; font-weight: 800; letter-spacing: -.03em; color: var(--pp-ink);
  display: flex; align-items: center; gap: 8px; line-height: 1.2;
}

/* ================================================================= cards == */

.card,
.pp-card {
  background: var(--pp-card-bg) !important;
  border: 1px solid var(--pp-card-brd) !important;
  border-radius: var(--pp-r-lg) !important;
  /* hairline plus a soft lift, so cards read off the tinted page without a heavy edge */
  box-shadow: 0 1px 2px rgba(18, 26, 51, .04), 0 10px 24px -18px rgba(24, 51, 105, .4) !important;
}
.card.shadow, .card-body.shadow, .shadow-sm, .shadow {
  box-shadow: 0 1px 2px rgba(18, 26, 51, .04), 0 10px 24px -18px rgba(24, 51, 105, .4) !important;
}
/* Nested cards already sit on a card — keep them flat so edges don't stack up */
.card .card { box-shadow: none !important; }

/* Metronic's h-100 / h-xl-100 sets height:100%, which inside the execution tab
   panes resolves against a definite-height ancestor and forces every stacked
   card to ~3300px — pages of blank space between tables. Cards stacked directly
   in a pane hug their content; cards inside a .row keep equal-height behaviour. */
.tab-pane > .card.h-100,
.tab-pane > .card.h-md-100,
.tab-pane > .card.h-lg-100,
.tab-pane > .card.h-xl-100,
.tab-pane > .card.h-xxl-100 { height: auto !important; }

.card-header {
  border-bottom: 1px solid var(--pp-card-brd) !important;
  min-height: 46px !important;
  padding: 10px 18px !important;
  /* faint blue wash ties the card header to the tinted table head below it */
  background: linear-gradient(180deg, #fbfdff 0%, #f4f8ff 100%) !important;
  border-radius: var(--pp-r-lg) var(--pp-r-lg) 0 0;
}
/* Small brand rule anchoring the card title */
.card-header > .card-title,
.card-header > h1, .card-header > h2, .card-header > h3, .card-header > h4, .card-header > h5 {
  position: relative;
  padding-left: 12px;
}
.card-header > .card-title::before,
.card-header > h1::before, .card-header > h2::before,
.card-header > h3::before, .card-header > h4::before, .card-header > h5::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 3px; height: 16px;
  transform: translateY(-50%);
  border-radius: 99px;
  background: linear-gradient(180deg, var(--pp-brand-500), var(--pp-brand-700));
}
.card-body { padding: 12px 18px !important; }
.card-title, .card-label,
.card-title h1, .card-title h2, .card-title h3, .card-title h4 {
  font-family: var(--pp-font-display);
  font-size: 15px !important; font-weight: 700 !important;
  color: var(--pp-ink) !important; letter-spacing: -.01em; margin: 0;
}

.pp-section-title {
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pp-ink-4); margin: 0 0 12px;
}

/* =============================================================== buttons == */

.btn {
  border-radius: var(--pp-r) !important;
  font-family: var(--pp-font) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 9px 16px !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease !important;
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 6px 12px !important; font-size: 12px !important; border-radius: var(--pp-r-sm) !important; }
.btn-lg { padding: 12px 22px !important; font-size: 14px !important; }

.btn-primary,
.btn.btn-primary {
  background: var(--pp-brand-600) !important;
  border: 1px solid var(--pp-brand-600) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: var(--pp-brand-700) !important;
  border-color: var(--pp-brand-700) !important;
}

.btn-secondary, .btn-light, .btn-outline-secondary, .btn-active-light {
  background: #fff !important;
  border: 1px solid var(--pp-card-brd) !important;
  color: var(--pp-ink-2) !important;
}
.btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover {
  background: var(--pp-hover) !important;
  border-color: #d5dded !important;
  color: var(--pp-brand-600) !important;
}

.btn-success { background: #10a05f !important; border-color: #10a05f !important; color: #fff !important; }
.btn-success:hover { background: #0d8a51 !important; border-color: #0d8a51 !important; }

.btn-danger { background: #e5405f !important; border-color: #e5405f !important; color: #fff !important; }
.btn-danger:hover { background: #cc2f4d !important; border-color: #cc2f4d !important; }

.btn-warning { background: #f0a220 !important; border-color: #f0a220 !important; color: #fff !important; }
.btn-info    { background: #2f7ee8 !important; border-color: #2f7ee8 !important; color: #fff !important; }

.btn-light-primary { background: var(--pp-brand-50) !important; color: var(--pp-brand-600) !important; border: 1px solid transparent !important; }
.btn-light-primary:hover,
.btn.btn-light-primary:hover:not(.btn-active) {
  background: var(--pp-brand-100) !important;
  color: var(--pp-brand-600) !important;
  border-color: transparent !important;
}
.btn-light-danger  { background: var(--pp-red-bg) !important;   color: var(--pp-red-ink) !important;   border: 1px solid transparent !important; }
.btn-light-success { background: var(--pp-green-bg) !important; color: var(--pp-green-ink) !important; border: 1px solid transparent !important; }
.btn-light-warning { background: var(--pp-amber-bg) !important; color: var(--pp-amber-ink) !important; border: 1px solid transparent !important; }

.btn-outline-primary { background: #fff !important; border: 1px solid var(--pp-brand-200) !important; color: var(--pp-brand-600) !important; }
.btn-outline-primary:hover { background: var(--pp-brand-50) !important; }

/* Ghost / icon buttons */
.btn.btn-icon {
  width: 34px !important; height: 34px !important; padding: 0 !important;
  border-radius: var(--pp-r-sm) !important;
  display: inline-grid !important; place-items: center;
}
.pp-icon-btn {
  width: 30px; height: 30px; border-radius: 8px;
  display: inline-grid; place-items: center;
  background: #fff; border: 1px solid var(--pp-card-brd);
  color: var(--pp-ink-3); cursor: pointer;
}
.pp-icon-btn:hover { color: var(--pp-brand-600); border-color: var(--pp-brand-200); background: var(--pp-brand-50); }

/* Toolbar strip above tables */
.pp-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 16px;
}
.pp-toolbar .pp-spacer { flex: 1 1 auto; }

/* Pill filter/segment group */
.pp-segment { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pp-pill {
  padding: 7px 15px; border-radius: 99px;
  font-size: 12.5px; font-weight: 600;
  background: #fff; border: 1px solid var(--pp-card-brd); color: var(--pp-ink-2);
  cursor: pointer; white-space: nowrap;
}
.pp-pill:hover { border-color: var(--pp-brand-200); color: var(--pp-brand-600); }
.pp-pill.active {
  background: var(--pp-brand-600); border-color: var(--pp-brand-600); color: #fff;
}
.pp-pill.is-dark { background: var(--pp-ink); border-color: var(--pp-ink); color: #fff; }

/* .pp-pill on its own reads as a filter chip (used elsewhere for exactly
   that) — this modifier is for the in-page section jump-links on
   part_data_summary.html, so a small chevron marks it as "scrolls you
   somewhere" rather than "toggles a filter". No active/highlight state by
   design — see the comment on the click handler in part_data_summary.html. */
.pp-pill-jump { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.pp-pill-jump svg { flex-shrink: 0; opacity: .55; transition: transform .15s ease; }
.pp-pill-jump:hover svg { opacity: .9; transform: translateY(1px); }

/* Anchor-jump targets land flush at the top of the document, which is
   hidden under the sticky #kt_app_header — offset by the same variable the
   header itself is measured into. */
.pp-jump-target { scroll-margin-top: calc(var(--pp-header-h) + 12px); }

/* ================================================================= forms == */

.form-control, .form-select, .select2-selection, textarea.form-control {
  border-radius: var(--pp-r-sm) !important;
  border: 1px solid var(--pp-card-brd) !important;
  background: #fff !important;
  color: var(--pp-ink) !important;
  font-size: 13px !important;
  /* no !important here, so Bootstrap/Metronic padding utilities (ps-13 etc.)
     still win — inputs with an overlaid search icon need that left padding */
  padding: 8px 12px;
  box-shadow: none !important;
}
.form-control:focus, .form-select:focus, textarea.form-control:focus {
  border-color: var(--pp-brand-400) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
}
.form-label, label { font-size: 12px; font-weight: 600; color: var(--pp-ink-2); }

/* Metronic's icon-in-field pattern: an absolutely positioned icon plus a ps-* class
   on the input. Keep a floor on the left padding so the icon never sits on the text. */
.position-relative > .form-control.ps-10,
.position-relative > .form-control.ps-11,
.position-relative > .form-control.ps-12,
.position-relative > .form-control.ps-13,
.position-relative > .form-control.ps-14,
.position-relative > .form-control.ps-15,
.d-flex.position-relative .form-control[class*="ps-1"],
.card-title .position-relative .form-control { padding-left: 2.9rem !important; }

.pp-search { position: relative; display: inline-flex; align-items: center; margin: 0; }
.pp-search svg { position: absolute; left: 12px; width: 15px; height: 15px; color: var(--pp-ink-4); pointer-events: none; }
.pp-search input {
  padding-left: 35px !important;
  min-width: 240px;
  height: 36px;
  border-radius: var(--pp-r) !important;
}
.pp-search input:focus {
  border-color: var(--pp-brand-400) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
}
@media (max-width: 575.98px) {
  .pp-search input { min-width: 0; width: 100%; }
}

.form-check-input:checked { background-color: var(--pp-brand-600) !important; border-color: var(--pp-brand-600) !important; }
.form-switch .form-check-input:checked { background-color: #10a05f !important; border-color: #10a05f !important; }

/* ================================================================ tables == */

.table {
  --bs-table-bg: transparent;
  font-size: 12.5px !important;
  color: var(--pp-ink-2) !important;
  border-color: var(--pp-line) !important;
}

/* Blue-tinted head: replaces the old purple inline colours and gives every table
   a  structural band instead of white-on-white */
.table > thead,
.table > thead tr,
table thead[style],
table thead[style] tr {
  background: var(--pp-th-bg) !important;
  background-color: var(--pp-th-bg) !important;
}
.table > thead th:not([class*="risk"]):not([class*="bg-"]):not([style*="background"]),
table thead[style] th:not([class*="risk"]):not([class*="bg-"]):not([style*="background"]) {
  background: linear-gradient(180deg, var(--pp-th-bg) 0%, var(--pp-th-bg-2) 100%) !important;
  background-color: var(--pp-th-bg) !important;
}
.table > thead th:not([class*="risk"]):not([class*="bg-"]):not([style*="color"]),
table thead[style] th:not([class*="risk"]):not([class*="bg-"]):not([style*="color"]) {
  color: var(--pp-th-ink) !important;
  font-family: var(--pp-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 12px 14px !important;
  border-bottom: 2px solid var(--pp-th-brd) !important;
  border-right: 1px solid rgba(255, 255, 255, .65) !important;
  vertical-align: middle;
  white-space: nowrap;
}
.table > thead th:last-child { border-right: 0 !important; }
.table > thead th:first-child { border-top-left-radius: var(--pp-r); }
.table > thead th:last-child  { border-top-right-radius: var(--pp-r); }

.table > tbody > tr > td {
  padding: 8px 14px !important;
  border-bottom: 1px solid var(--pp-line) !important;
  font-weight: 500;
  vertical-align: middle;
}

/* Let DataTables size columns from content rather than from a stretched control:
   full-width form fields only apply where the cell is genuinely an editor. */
.table > tbody > tr > td > textarea,
.table > tbody > tr > td > input[type="text"] { min-width: 90px; }

/* Controls sitting inside data cells stay single-row height, so a textarea
   (Ref Des, comments) can't inflate the whole row. */
.table > tbody > tr > td textarea,
.table > tbody > tr > td input[type="text"],
.table > tbody > tr > td input:not([type]),
.table > tbody > tr > td select {
  width: 100%;
  min-height: 0 !important;
  height: 30px !important;
  padding: 5px 9px !important;
  font-family: var(--pp-font) !important;
  font-size: 11.8px !important;
  font-weight: 500;
  line-height: 1.4 !important;
  color: var(--pp-ink-2);
  background: #fff;
  border: 1px solid var(--pp-card-brd) !important;
  border-radius: var(--pp-r-sm) !important;
  box-shadow: none !important;
}
.table > tbody > tr > td textarea {
  resize: none;
  /* one line, but long Ref Des lists stay scrollable rather than lost */
  overflow: auto;
  white-space: nowrap;
}
.table > tbody > tr > td textarea:focus,
.table > tbody > tr > td input:focus,
.table > tbody > tr > td select:focus {
  border-color: var(--pp-brand-400) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
  outline: none;
}
/* Read-only textareas are display-only — drop the input chrome entirely,
   including the scrollbar arrows that made Ref Des cells look like widgets */
.table > tbody > tr > td textarea[readonly] {
  border-color: transparent !important;
  background: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden !important;
  cursor: default;
}
/* Text colour only where neither the cell nor its row carries its own colour */
.table > tbody > tr:not([class*="risk"]):not([class*="bg-"]):not([style*="background"])
  > td:not([class*="risk"]):not([class*="bg-"]):not(.text-white):not([style*="color"]):not([style*="background"]) {
  color: var(--pp-ink-2);
}
/* Row hover must never repaint a risk-coloured cell — or a row that is itself
   colour-coded (grade/total rows in the scorecards). */
.table > tbody > tr:not([class*="risk"]):not([class*="bg-"]):not([style*="background"]):hover
  > td:not([class*="risk"]):not([class*="bg-"]):not([style*="background"]) {
  background: var(--pp-hover);
}
.table.table-bordered > :not(caption) > * > * { border-color: var(--pp-line) !important; border-width: 1px !important; }
.table.border-2, .table.border-2 td, .table.border-2 th { border-width: 1px !important; }
.table-row-dashed > tbody > tr { border-bottom-style: solid !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: #fcfcfe !important; }

.pp-table-wrap {
  background: var(--pp-card-bg);
  border: 1px solid var(--pp-card-brd);
  border-radius: var(--pp-r-lg);
  box-shadow: var(--pp-sh-1);
  overflow: hidden;
}
.pp-table-wrap .table-responsive { border-radius: inherit; }

/* ---- Key/value panel table ----------------------------------------------- */
/* Label on the left, value on the right of a fixed split, so every one of these
   summary panels lines its values up in the same place. */
.table.pp-kv { table-layout: fixed; margin-bottom: 0; }
.table.pp-kv > tbody > tr > th {
  width: 52%;
  padding: 9px 14px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--pp-line) !important;
  font-family: var(--pp-font) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--pp-ink-3) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: normal;
  vertical-align: middle;
}
.table.pp-kv > tbody > tr > td {
  padding: 9px 14px !important;
  border-bottom: 1px solid var(--pp-line) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--pp-ink) !important;
  overflow-wrap: anywhere;
  vertical-align: middle;
}
.table.pp-kv > tbody > tr:last-child > th,
.table.pp-kv > tbody > tr:last-child > td { border-bottom: 0 !important; }
.table.pp-kv > tbody > tr:hover > th,
.table.pp-kv > tbody > tr:hover > td { background: var(--pp-hover) !important; }

/* A sub-heading row inside a key/value table (e.g. "3TG Information") */
.table.pp-kv > tbody > tr.pp-kv-group > th {
  width: auto;
  background: #f6faff !important;
  color: var(--pp-th-ink) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--pp-th-brd) !important;
}
.table.pp-kv > tbody > tr > th.pp-kv-sub { padding-left: 26px !important; }

/* ---- In-cell components -------------------------------------------------- */

/* Identifier chip: a link to a record (BOM number, part number, product name).
   Soft brand tint + mono type, so IDs read as data instead of as CTAs. */
.pp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: var(--pp-r-sm);
  background: var(--pp-brand-50);
  border: 1px solid #d5e3fb;
  color: var(--pp-brand-700) !important;
  font-family: var(--pp-font-mono);
  font-size: 11.5px; font-weight: 500; line-height: 1.35;
  text-align: left;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pp-chip:hover {
  background: var(--pp-brand-100);
  border-color: var(--pp-brand-200);
  color: var(--pp-brand-800) !important;
}
.pp-chip svg,
.pp-chip i { flex-shrink: 0; opacity: .75; font-size: 10px; }
.pp-chip:hover svg, .pp-chip:hover i { opacity: 1; }
.pp-chip-text { overflow-wrap: anywhere; }

/* A wrapped set of identifier chips (e.g. every BOM inside a product) */
.pp-chip-list {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 4px;
}

/* Actions parked at the bottom of a card, separated from its content */
.pp-card-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--pp-line);
}
.pp-card-actions .btn { display: inline-flex; align-items: center; }
.pp-card-actions.is-end { justify-content: flex-end; }
.pp-card-actions.is-center { justify-content: center; }

/* Report download: a softer, wider action than a solid primary — it's a
   secondary outcome of the card, not the card's main call to action. */
.pp-btn-report {
  min-width: 230px;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px !important;
  background: var(--pp-brand-50) !important;
  border: 1px solid #cfe0fb !important;
  color: var(--pp-brand-700) !important;
  box-shadow: none !important;
}
.pp-btn-report:hover {
  background: var(--pp-brand-100) !important;
  border-color: var(--pp-brand-200) !important;
  color: var(--pp-brand-800) !important;
}
.pp-btn-report svg { opacity: .85; }

/* ---- Side list: navigable items that read as buttons ---------------------- */

.pp-side-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%;
  margin-bottom: 8px;
  padding: 11px 12px 11px 14px;
  border-radius: var(--pp-r);
  background: #fff;
  border: 1px solid var(--pp-card-brd);
  box-shadow: 0 1px 1px rgba(18, 26, 51, .03);
  font-size: 12.5px; font-weight: 600;
  color: var(--pp-ink-2) !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.pp-side-item:last-child { margin-bottom: 0; }
.pp-side-item svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .5; }
.pp-side-item-label { overflow-wrap: anywhere; }
.pp-side-item:hover {
  background: var(--pp-brand-50);
  border-color: var(--pp-brand-200);
  color: var(--pp-brand-700) !important;
  transform: translateX(1px);
}
.pp-side-item:hover svg { opacity: 1; }
/* The item you're currently looking at */
.pp-side-item.active {
  background: var(--pp-brand-600);
  border-color: var(--pp-brand-600);
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(37, 99, 235, .25);
}
.pp-side-item.active svg { opacity: .9; }

/* ---- Task tile: an icon, a short explanation and one action --------------- */

.pp-task-tile {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--pp-card-brd);
  border-radius: var(--pp-r-lg);
  box-shadow: var(--pp-sh-1);
}
.pp-task-icon {
  width: 42px; height: 42px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--pp-brand-50);
  color: var(--pp-brand-600);
}
.pp-task-icon svg { width: 19px; height: 19px; }
.pp-task-icon.is-green { background: var(--pp-green-bg); color: var(--pp-green-ink); }
.pp-task-icon.is-amber { background: var(--pp-amber-bg); color: var(--pp-amber-ink); }
.pp-task-body { flex: 1 1 auto; min-width: 0; }
.pp-task-title {
  font-family: var(--pp-font-display);
  font-size: 14px; font-weight: 700; color: var(--pp-ink);
  letter-spacing: -.01em;
}
.pp-task-hint {
  margin-top: 3px;
  font-size: 12px; font-weight: 500; line-height: 1.45;
  color: var(--pp-ink-3);
}
.pp-task-tile .btn { flex-shrink: 0; }

@media (max-width: 575.98px) {
  .pp-task-tile { flex-direction: column; align-items: flex-start; }
}

/* Row action: quiet icon button that only colours up on hover */
.pp-action {
  width: 30px; height: 30px;
  display: inline-grid; place-items: center;
  border-radius: var(--pp-r-sm);
  background: #fff;
  border: 1px solid var(--pp-card-brd);
  color: var(--pp-ink-3);
  cursor: pointer;
  padding: 0;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pp-action + .pp-action { margin-left: 6px; }
.pp-action svg { width: 14px; height: 14px; }
.pp-action i { font-size: 12px; }
.pp-action:hover { background: var(--pp-brand-50); border-color: var(--pp-brand-200); color: var(--pp-brand-600); }
.pp-action.is-danger:hover { background: var(--pp-red-bg); border-color: #f8ccd6; color: var(--pp-red-ink); }
.pp-actions { display: inline-flex; align-items: center; justify-content: center; }

/* Long free-text cell (Ref Des lists, comments): sizes to its content so the
   column can auto-width, but stops growing past a sane cap and shows the rest
   on hover via the cell's title. Plain text — not a form control — because a
   textarea/input contributes no intrinsic width and forces a stunted column. */
.pp-cell-clamp {
  display: block;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-cell-clamp.is-wide { max-width: 360px; }

/* Cell helpers matching the reference screens */
.pp-cell-code { font-family: var(--pp-font-mono); font-size: 11.8px; color: var(--pp-ink-2); letter-spacing: -.01em; }
.pp-cell-strong { font-weight: 700 !important; color: var(--pp-ink) !important; }
.pp-cell-muted { color: var(--pp-ink-4) !important; }

/* Per-column filter row — lives in the table head, pinned above the rows */
.table > thead tr.pp-filter-row > th {
  padding: 7px 8px !important;
  background: #f6faff !important;
  border-bottom: 1px solid var(--pp-th-brd) !important;
  border-right: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
tr.pp-filter-row select,
tr.pp-filter-row input {
  width: 100%;
  height: 30px;
  padding: 3px 7px;
  font-family: var(--pp-font);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--pp-ink-2);
  background: #fff;
  border: 1px solid var(--pp-card-brd);
  border-radius: var(--pp-r-sm);
  cursor: pointer;
  outline: none;
}
tr.pp-filter-row input { cursor: text; font-weight: 500; }
tr.pp-filter-row select:focus,
tr.pp-filter-row input:focus {
  border-color: var(--pp-brand-400);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
/* A filter that's actually filtering reads as active */
tr.pp-filter-row select.is-filtering,
tr.pp-filter-row input.is-filtering {
  border-color: var(--pp-brand-400);
  background: var(--pp-brand-50);
  color: var(--pp-brand-700);
}

/* Reset for the header filters, injected into every table's button bar.
   Greyed out until something is filtering, so it reads as a status light as
   much as a control — on a wide table the active filter is often scrolled
   out of sight. */
.pp-clear-filters:disabled {
  opacity: .5;
  cursor: default;
}
.pp-clear-filters.is-active {
  border-color: var(--pp-brand-400);
  background: var(--pp-brand-50);
  color: var(--pp-brand-700);
}
.pp-clear-filters.is-active:hover {
  background: var(--pp-brand-100);
  color: var(--pp-brand-700);
}
.pp-clear-filters-count { font-weight: 700; }
/* The old footer filter row is retired wherever filters moved up. The scroll-foot
   copy DataTables clones keeps the table's classes, so this catches it too —
   scoped to our tables so genuine table footers elsewhere still show. */
table.pp-filters-in-head > tfoot,
.dt-scroll-foot table.pp-filters-in-head,
.dataTables_scrollFoot table.pp-filters-in-head { display: none !important; }

/* With scrollX/scrollY, DataTables keeps a duplicate of the head inside the
   scroll body purely to sync column widths. It collapses its own cell contents,
   but not our filter widgets — so hide that copy of the row outright. */
.dataTables_scrollBody thead tr.pp-filter-row,
.dt-scroll-body thead tr.pp-filter-row {
  display: none !important;
}

/* ---- Query builder (Master Search "Advanced Filter") --------------------- */

.pp-filter-builder {
  border: 1px solid var(--pp-card-brd);
  border-radius: var(--pp-r);
  background: #fbfcff;
  overflow: hidden;
}
/* Column captions, aligned to the Field / Value cells below */
.pp-filter-builder-head {
  display: flex; gap: 14px;
  padding: 9px 14px;
  background: var(--pp-th-bg);
  border-bottom: 1px solid var(--pp-th-brd);
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pp-th-ink);
}
.pp-filter-builder-head .pp-filter-builder-col:first-child { width: 300px; flex: 0 0 300px; }
.pp-filter-builder-head .pp-filter-builder-col:last-child  { flex: 1 1 auto; }

/* Condition rows: the markup is a borderless table, so tidy its cells */
.pp-filter-builder #search_table > tbody > tr > td {
  padding: 9px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--pp-line) !important;
  vertical-align: middle;
  background: transparent !important;
}
.pp-filter-builder #search_table > tbody > tr:last-child > td { border-bottom: 0 !important; }
.pp-filter-builder #search_table > tbody > tr > td:first-child { width: 300px; }
.pp-filter-builder #search_table .form-group,
.pp-filter-builder #search_table fieldset { margin: 0 !important; }
.pp-filter-builder #search_table .fields { width: 100%; }
.pp-filter-builder .appendvalue { font-size: 12.5px; color: var(--pp-ink-3); }
.pp-filter-builder .appendvalue .form-control,
.pp-filter-builder .appendvalue select,
.pp-filter-builder .appendvalue input { max-width: 420px; }
.pp-filter-builder-remove { width: 46px; text-align: right; }

/* Actions bar under the conditions */
.pp-filter-builder-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px;
  background: #f5f8fe;
  border-top: 1px solid var(--pp-card-brd);
}

/* ---- One scrollbar per table --------------------------------------------- */

/* When DataTables owns the row scroller, any wrapper around it must not scroll
   vertically too — otherwise you get a scroll inside a scroll and the toolbar,
   head and pager drift out of view. */
.table-responsive:has(.dt-scroll),
.table-responsive:has(.dataTables_scroll),
.card-body:has(> .table-responsive > .dataTables_wrapper .dt-scroll) {
  max-height: none !important;
  height: auto !important;
  overflow-y: visible !important;
}

/* The row viewport is the only thing that scrolls. DataTables already keeps the
   column head and the toolbar/pager outside that viewport, so they hold their
   position on their own — do NOT make them position:sticky. Sticky inside the
   scroller detaches the head and floats it over the rows. */
/* No overscroll-behavior here on purpose: "contain" blocks scroll from
   chaining to the page even when the viewport has nothing to scroll (fewer
   rows than fit), trapping the wheel over the table. Default "auto" lets it
   scroll the rows first, then hand off to the page once it hits the edge. */
.dt-scroll-head,
.dataTables_scrollHead {
  background: var(--pp-th-bg);
  border-radius: var(--pp-r) var(--pp-r) 0 0;
}

/* ---- "Go to page" jump box next to the pager ------------------------------ */

.pp-goto {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: 14px;
  font-size: 12px; font-weight: 600; color: var(--pp-ink-3);
  white-space: nowrap;
}
.pp-goto-label { letter-spacing: .01em; }
.pp-goto input {
  width: 62px;
  height: 32px;
  padding: 4px 8px;
  text-align: center;
  font-family: var(--pp-font);
  font-size: 12.5px; font-weight: 700;
  color: var(--pp-ink);
  background: #fff;
  border: 1px solid var(--pp-card-brd);
  border-radius: var(--pp-r-sm);
  outline: none;
}
.pp-goto input:focus {
  border-color: var(--pp-brand-400);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.pp-goto-total { color: var(--pp-ink-4); font-weight: 600; }

/* Sits inline with the pager, wrapping under it on small screens */
.dt-layout-row:has(.dt-paging),
.dataTables_wrapper .row:has(.dataTables_paginate) { flex-wrap: wrap; }
.dt-layout-cell:has(> .pp-goto),
.dataTables_wrapper .col-sm-7:has(> .pp-goto),
.dataTables_wrapper .col-sm-12:has(> .pp-goto) {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; flex-wrap: wrap;
}
@media (max-width: 575.98px) {
  .pp-goto { margin-left: 0; margin-top: 10px; }
}

/* ---- Chat-bubble hover tip: put data-tip="..." on any element ------------
   CSS-only (no JS init needed, unlike Bootstrap's tooltip component), so it
   works the same everywhere it's dropped in. Bubble sits to the right of the
   element with a small pointer, so it never covers whatever sits above it —
   fades/slides in on hover or keyboard focus. */
.pp-tip { position: relative; }
.pp-tip::before,
.pp-tip::after {
  position: absolute;
  top: 50%;
  left: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  transform: translate(-4px, -50%);
  z-index: 80;
}
.pp-tip::before {
  content: attr(data-tip);
  margin-left: 10px;
  padding: 7px 11px;
  width: max-content;
  max-width: 190px;
  white-space: normal;
  background: var(--pp-ink);
  color: #fff;
  font-size: 11.5px; font-weight: 600; line-height: 1.4;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(18, 26, 51, .28);
}
.pp-tip::after {
  content: "";
  margin-left: 4px;
  border: 5px solid transparent;
  border-right-color: var(--pp-ink);
}
.pp-tip:hover::before, .pp-tip:hover::after,
.pp-tip:focus-visible::before, .pp-tip:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}

/* ---- One straight footer row everywhere: record count, pager, go-to-page --
   DataTables ships two different DOMs across this project (the 2.x
   dt-layout-row/dt-layout-cell markup, and the legacy Bootstrap
   .row > .col-sm-5/.col-sm-7 markup). Force both onto a single centered,
   space-between flex row so "Showing x of y", the page buttons and the
   go-to-page box always share one baseline instead of drifting to their
   own top-aligned column. */
.dt-layout-row:has(.dt-info),
.dt-layout-row:has(.dt-paging),
.dataTables_wrapper .row:has(.dataTables_info),
.dataTables_wrapper .row:has(.dataTables_paginate),
.pp-table-footer,
.pp-table-footer-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 10px;
}
.dt-layout-cell.dt-info,
.dt-layout-cell:has(> .dt-paging),
.dataTables_wrapper .col-sm-5:has(> .dataTables_info),
.dataTables_wrapper .col-sm-7:has(> .dataTables_paginate),
.pp-table-footer-cell {
  display: flex;
  align-items: center;
  min-height: 32px;
}
@media (max-width: 767.98px) {
  .dt-layout-row:has(.dt-info),
  .dt-layout-row:has(.dt-paging),
  .dataTables_wrapper .row:has(.dataTables_info),
  .dataTables_wrapper .row:has(.dataTables_paginate),
  .pp-table-footer,
  .pp-table-footer-row {
    justify-content: center;
  }
}

/* DataTables "Column visibility" collection — capped height, never a full-page list */
div.dt-button-collection,
.dt-button-collection.dropdown-menu,
.dt-button-collection {
  max-height: 340px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-width: 240px !important;
  padding: 6px !important;
  border-radius: var(--pp-r) !important;
  border: 1px solid var(--pp-card-brd) !important;
  box-shadow: var(--pp-sh-3) !important;
  background: #fff !important;
}
div.dt-button-collection .dt-button,
.dt-button-collection .dropdown-item,
.dt-button-collection button.dt-button {
  position: relative;               /* the ✓ is absolutely placed by DataTables */
  display: flex !important; align-items: center; gap: 10px;
  width: 100% !important;
  margin: 0 !important;
  padding: 8px 32px 8px 11px !important;
  border: 0 !important;
  border-radius: var(--pp-r-sm) !important;
  background: transparent !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--pp-ink-2) !important;
  text-align: left !important;
}
div.dt-button-collection .dt-button:hover,
.dt-button-collection .dropdown-item:hover {
  background: var(--pp-hover) !important;
  color: var(--pp-brand-600) !important;
}
div.dt-button-collection .dt-button.dt-button-active,
div.dt-button-collection .dt-button-active {
  background: var(--pp-brand-50) !important;
  color: var(--pp-brand-700) !important;
  padding-right: 32px !important;
}
div.dt-button-collection-title {
  padding: 8px 11px 6px !important;
  font-size: 10.5px !important; font-weight: 800 !important;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--pp-ink-4) !important;
}

/* Global table search: a normal-sized field on one line, never a full-width bar.
   DataTables 2 styles this as `div.dt-container div.dt-search`, so match that
   specificity or the label ends up stacked above the field. */
div.dt-container div.dt-search,
div.dt-container div.dataTables_filter,
.dt-search, .dataTables_filter {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  text-align: left !important;
}
div.dt-container div.dt-search label { margin: 0 !important; }
div.dt-container div.dt-search input { margin-left: 0 !important; }
.dt-search label, .dataTables_filter label {
  display: inline-flex !important; align-items: center; gap: 8px;
  margin: 0 !important; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--pp-ink-3);
}
.dt-search input, .dt-search input[type="search"],
.dataTables_filter input, .dataTables_filter input[type="search"] {
  width: 240px !important;
  max-width: 100%;
  height: 34px !important;
  margin: 0 !important;
  border-radius: var(--pp-r-sm) !important;
  border: 1px solid var(--pp-card-brd) !important;
  padding: 6px 11px !important;
  font-size: 12.5px !important;
  background: #fff !important;
}
.dt-search input:focus, .dataTables_filter input:focus {
  border-color: var(--pp-brand-400) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
  outline: none;
}

/* DataTables chrome */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-radius: var(--pp-r-sm) !important;
  border: 1px solid var(--pp-card-brd) !important;
  font-size: 12.5px !important;
  padding: 6px 10px !important;
  background: #fff !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { font-size: 12px !important; color: var(--pp-ink-3) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button,
.page-link {
  border-radius: var(--pp-r-sm) !important;
  border: 1px solid transparent !important;
  color: var(--pp-ink-2) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.page-item.active .page-link {
  background: var(--pp-brand-600) !important;
  border-color: var(--pp-brand-600) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current) {
  background: var(--pp-brand-50) !important; color: var(--pp-brand-600) !important;
}

/* ================================================================ badges == */

/* Shape only — colour is deliberately NOT touched here, because status/risk
   badges (Extreme Risk, High Risk, Medium Risk, …) carry meaning in their hue. */
.badge, .pp-badge {
  border-radius: 99px !important;
  font-family: var(--pp-font) !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  line-height: 1.3 !important;
  border: 0 !important;
}
.pp-badge {
  font-size: 10.5px;
  text-transform: uppercase;
  padding: 5px 10px;
  display: inline-flex; align-items: center; gap: 5px;
}
/* Neutral, non-risk badges used by the new UI chrome */
.pp-badge.is-green  { background: var(--pp-green-bg);  color: var(--pp-green-ink); }
.pp-badge.is-amber  { background: var(--pp-amber-bg);  color: var(--pp-amber-ink); }
.pp-badge.is-red    { background: var(--pp-red-bg);    color: var(--pp-red-ink); }
.pp-badge.is-blue   { background: var(--pp-blue-bg);   color: var(--pp-blue-ink); }
.pp-badge.is-brand  { background: var(--pp-brand-50); color: var(--pp-brand-600); }
.pp-badge.is-slate  { background: var(--pp-slate-bg);  color: var(--pp-slate-ink); }

/* ---- Risk / status colour protection -------------------------------------
   Anything already coloured by the app keeps its exact colour. */
.bg-green, .bg-yellow, .bg-orange, .bg-red, .bg-blue,
.mediumrisk, [class*="risk"],
.bg-danger, .bg-warning, .bg-success, .bg-info, .bg-primary-risk,
.badge-danger, .badge-warning, .badge-success, .badge-info,
.badge-light-danger, .badge-light-warning, .badge-light-success, .badge-light-info {
  font-family: var(--pp-font);
  /* no background / color declarations on purpose */
}

/* ============================================================= tabs/nav === */

.nav-tabs, .nav-line-tabs { border-bottom: 1px solid var(--pp-line) !important; gap: 4px; }
.nav-tabs .nav-link, .nav-line-tabs .nav-link {
  border: 0 !important; background: transparent !important;
  color: var(--pp-ink-3) !important;
  font-size: 13px !important; font-weight: 600 !important;
  padding: 11px 14px !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
}
.nav-tabs .nav-link.active, .nav-line-tabs .nav-link.active {
  color: var(--pp-brand-600) !important;
  border-bottom-color: var(--pp-brand-600) !important;
  font-weight: 700 !important;
}

/* Row of summary cards: even breathing room on both axes, and the tab card
   below it gets clear separation too. */
.row.pp-card-grid {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1.5rem;
  margin-bottom: 1.5rem;
}
.row.pp-card-grid > [class*="col-"] { display: flex; }
.row.pp-card-grid > [class*="col-"] > .card { width: 100%; }

/* ---- Tab bar with a trailing control cluster ------------------------------ */

/* Tabs centred on their own row, controls on a second row beneath, so selecting
   a filter (which reveals "Clear") can never reflow the tabs. */
.pp-tabbar { display: flex; flex-direction: column; }
.pp-tabbar .nav {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  flex-wrap: wrap;
}
.pp-tabbar .nav .nav-item { flex: 0 0 auto; }
.pp-tabbar .nav .nav-link { margin-inline: 0 !important; padding-inline: 18px !important; }

/* Risk highlighter sits with the tabs, next to the tables it acts on.
   Only layout and affordance here — the badge colours stay exactly as they are. */
.pp-risk-filter {
  display: flex; align-items: center; justify-content: center;
  gap: 7px; flex-wrap: wrap;
  /* fixed row height keeps the layout still when Clear appears/disappears */
  min-height: 52px;
  padding: 8px 4px;
  border-top: 1px solid var(--pp-line);
}
.pp-risk-filter-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--pp-ink-3);
  margin-right: 6px;
}
.pp-risk-filter-label svg { flex-shrink: 0; opacity: .7; }
.pp-risk-filter .risk-filter-badge {
  cursor: pointer;
  padding: 6px 11px !important;
  font-size: 10.5px !important;
  transition: opacity .15s ease, box-shadow .15s ease, transform .12s ease;
}
.pp-risk-filter .risk-filter-badge:hover { transform: translateY(-1px); }
/* Selected state is an outline, so it never repaints the risk colour itself */
.pp-risk-filter .risk-filter-badge.is-active {
  box-shadow: 0 0 0 2px var(--pp-brand-600);
}
.pp-risk-filter #exec-risk-reset,
.pp-risk-filter #risk-reset { margin-left: 4px; }

/* Card-local variant: lives above the Summary Report table it actually acts
   on, instead of the tabbar (where it used to sit despite filtering just
   that one card). Centred as a self-contained toolbar strip rather than a
   left-hung afterthought, with no tab-height affordances. */
.pp-risk-filter--card {
  justify-content: center;
  min-height: 0;
  gap: 10px;
  margin: 0 0 16px;
  padding: 10px 16px;
  border-top: none;
  background: rgba(37, 99, 235, .035);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-r);
}
.pp-risk-filter--card .pp-risk-filter-label {
  margin-right: 2px;
}

@media (max-width: 991.98px) {
  /* tabs scroll sideways rather than wrapping into several centred rows */
  .pp-tabbar .nav {
    justify-content: flex-start !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pp-tabbar .nav::-webkit-scrollbar { display: none; }
  .pp-risk-filter { min-height: 0; padding-bottom: 12px; }
}

/* Breadcrumbs — kept subtle; heroes carry the page identity now */
.breadcrumb { font-size: 12px !important; }
.breadcrumb-item, .breadcrumb-item a { color: var(--pp-ink-4) !important; font-weight: 600 !important; }
.breadcrumb-item a:hover { color: var(--pp-brand-600) !important; }

/* ================================================================ modals == */

.modal-content {
  border-radius: var(--pp-r-xl) !important;
  border: 1px solid var(--pp-card-brd) !important;
  box-shadow: var(--pp-sh-3) !important;
}
.modal-header { border-bottom: 1px solid var(--pp-line) !important; padding: 18px 22px !important; }
.modal-title { font-family: var(--pp-font-display); font-size: 16px !important; font-weight: 700 !important; }
.modal-body { padding: 20px 22px !important; }
.modal-footer { border-top: 1px solid var(--pp-line) !important; padding: 14px 22px !important; }

/* ---- SweetAlert dialogs & loading states --------------------------------- */

.swal2-container { backdrop-filter: blur(2px); }
.swal2-backdrop-show { background: rgba(15, 26, 56, .48) !important; }

.swal2-popup {
  border-radius: var(--pp-r-xl) !important;
  border: 1px solid var(--pp-card-brd) !important;
  box-shadow: var(--pp-sh-3) !important;
  font-family: var(--pp-font) !important;
  padding: 26px 26px 22px !important;
  width: 26em !important;
}
.swal2-title {
  font-family: var(--pp-font-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  color: var(--pp-ink) !important;
  padding: 0 !important;
  margin: 0 0 6px !important;
}
.swal2-html-container {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  color: var(--pp-ink-3) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Progress spinner: brand blue ring, not the default grey/blue mix */
.swal2-loader {
  border-color: var(--pp-brand-600) transparent var(--pp-brand-600) transparent !important;
  border-width: 3px !important;
  width: 2.4em !important; height: 2.4em !important;
  margin: 18px auto 6px !important;
}
/* A loading dialog reads title-first, so put the spinner under the text */
.swal2-popup.swal2-show .swal2-loader { order: 3; }
.swal2-actions { margin: 20px 0 0 !important; gap: 8px; }
.swal2-styled { margin: 0 !important; }
.swal2-styled.swal2-confirm {
  border-radius: var(--pp-r) !important;
  background: var(--pp-brand-600) !important;
  border: 1px solid var(--pp-brand-600) !important;
  box-shadow: none !important;
  padding: 9px 18px !important;
  font-size: 13px !important; font-weight: 700 !important;
}
.swal2-styled.swal2-confirm:hover { background: var(--pp-brand-700) !important; }
.swal2-styled.swal2-cancel {
  border-radius: var(--pp-r) !important;
  background: #fff !important;
  border: 1px solid var(--pp-card-brd) !important;
  color: var(--pp-ink-2) !important;
  padding: 9px 18px !important;
  font-size: 13px !important; font-weight: 700 !important;
}
.swal2-styled.swal2-cancel:hover { background: var(--pp-hover) !important; color: var(--pp-brand-600) !important; }
.swal2-styled.swal2-deny {
  border-radius: var(--pp-r) !important;
  background: #e5405f !important; border: 1px solid #e5405f !important;
  font-size: 13px !important; font-weight: 700 !important;
}
.swal2-styled:focus { box-shadow: 0 0 0 3px rgba(37, 99, 235, .18) !important; }

/* Status icons, sized down and recoloured to the palette */
.swal2-icon { width: 62px !important; height: 62px !important; margin: 6px auto 16px !important; border-width: 3px !important; }
.swal2-icon .swal2-icon-content { font-size: 30px !important; }
.swal2-icon.swal2-success { border-color: #10a05f !important; color: #10a05f !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: #10a05f !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(16, 160, 95, .28) !important; }
.swal2-icon.swal2-error { border-color: #e5405f !important; color: #e5405f !important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: #e5405f !important; }
.swal2-icon.swal2-warning { border-color: #f0a220 !important; color: #f0a220 !important; }
.swal2-icon.swal2-info,
.swal2-icon.swal2-question { border-color: var(--pp-brand-600) !important; color: var(--pp-brand-600) !important; }

/* Timer bar picks up the brand too */
.swal2-timer-progress-bar { background: var(--pp-brand-600) !important; }
.swal2-close { color: var(--pp-ink-4) !important; }
.swal2-close:hover { color: var(--pp-ink-2) !important; }

/* Inputs inside dialogs follow the form styling */
.swal2-input, .swal2-textarea, .swal2-select {
  border-radius: var(--pp-r-sm) !important;
  border: 1px solid var(--pp-card-brd) !important;
  font-size: 13px !important;
  box-shadow: none !important;
}
.swal2-input:focus, .swal2-textarea:focus, .swal2-select:focus {
  border-color: var(--pp-brand-400) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
}

/* Bootstrap's inline spinners (button "please wait" states, DataTables processing) */
.spinner-border { border-color: var(--pp-brand-600); border-right-color: transparent; }
.btn-primary .spinner-border,
.btn-hero-light .spinner-border { border-color: currentColor; border-right-color: transparent; }
.dt-processing, .dataTables_processing {
  border-radius: var(--pp-r) !important;
  border: 1px solid var(--pp-card-brd) !important;
  box-shadow: var(--pp-sh-2) !important;
  background: #fff !important;
  font-family: var(--pp-font) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--pp-ink-2) !important;
}
.dt-processing > div > div,
.dataTables_processing > div > div { background: var(--pp-brand-600) !important; }

/* Bare "Loading…" blocks that pages render inline (not via SweetAlert) */
.pp-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 34px 20px;
  font-size: 13px; font-weight: 600; color: var(--pp-ink-3);
}
.pp-loading::before {
  content: "";
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 3px solid var(--pp-brand-100);
  border-top-color: var(--pp-brand-600);
  animation: pp-spin .8s linear infinite;
}
@keyframes pp-spin { to { transform: rotate(360deg); } }

/* ================================================================ layout == */

.app-wrapper, .app-main, .app-content { background: transparent !important; }
.app-content { padding-top: 0 !important; }
.app-toolbar { padding-top: 0 !important; padding-bottom: 0 !important; }
/* Full-width content column (matches the ProcurePilot shell) — no centered
   cap, just a gutter, so wide tables/cards get all the room a fullscreen
   window gives them instead of stranding it as dead side margins. */
.app-container,
.app-container.container-xxl,
.app-wrapper > .container-xxl,
.app-main .container-xxl { max-width: none !important; }
.app-container { padding-inline: 26px !important; width: 100%; }

/* Legacy page headings (pages that still use the Metronic toolbar) */
.page-heading {
  font-family: var(--pp-font-display) !important;
  font-size: 24px !important; font-weight: 800 !important;
  letter-spacing: -.03em; color: var(--pp-ink) !important;
}

/* Pinned to the viewport bottom on every page — content reserves room for it
   via body's padding-bottom below, so nothing ever needs an extra scroll just
   to reach the footer. */
.pp-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 26px;
  background: var(--pp-page-bg);
  border-top: 1px solid var(--pp-card-brd);
  font-size: 11.5px; font-weight: 600; color: var(--pp-ink-4);
}
.pp-footer a { color: var(--pp-brand-600); }
body#kt_body { padding-bottom: 42px; }

/* ================================================================== FABs == */

.pp-fab-stack {
  position: fixed; right: 26px; bottom: 68px;
  display: flex; flex-direction: column; gap: 12px;
  z-index: 9999;
}
.pp-fab {
  width: 52px; height: 52px; border-radius: 50%;
  border: none; cursor: pointer;
  display: grid; place-items: center;
  background: var(--ag-accent, #2563eb);
  color: #fff;
  box-shadow: 0 8px 24px rgba(37,99,235,.4);
  transition: transform .16s ease, box-shadow .16s ease;
}
.pp-fab:hover { transform: translateY(-2px) scale(1.04); background: var(--ag-accent-hover, #1d4ed8); box-shadow: 0 10px 26px rgba(37,99,235,.46); }
.pp-fab svg { width: 22px; height: 22px; }

/* The BOM agent widget shipped in base.html, re-skinned to match the
   Quote_Management assistant widget's navy header / purple accent look. */
#agent-panel {
  border-radius: 20px !important;
  border: 1px solid var(--pp-card-brd) !important;
  box-shadow: 0 1px 2px rgba(20,18,59,.05), 0 20px 50px -12px rgba(20,18,59,.28) !important;
  bottom: 92px !important; right: 26px !important;
}
#agent-header {
  background: var(--ag-navy) !important;
  padding: 14px 10px 14px 16px !important;
}
#agent-header .ah-title { font-family: var(--pp-font-display); font-size: 14px; font-weight: 700; }
.am { border-radius: 16px !important; font-size: 13px !important; }
.am.user { background: var(--ag-accent) !important; }
.am.bot  { background: #f5f6fc !important; color: var(--pp-ink-2) !important; }
#agent-input { border-radius: 12px !important; font-size: 13px !important; }
#agent-input:focus { border-color: var(--ag-accent) !important; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
#agent-send { background: var(--ag-accent) !important; border-radius: 10px !important; }
#agent-send:hover { background: var(--ag-accent-hover) !important; }

/* ============================================================ utilities === */

.pp-empty {
  text-align: center; padding: 44px 20px; color: var(--pp-ink-4);
  font-size: 13px; font-weight: 500;
}
.pp-empty strong { color: var(--pp-ink-2); font-weight: 700; }
/* The empty-state row must not inherit the sticky/centred cell rules */
tr.pp-no-results > td { border-bottom: 0 !important; background: #fff !important; }
.pp-divider { height: 1px; background: var(--pp-line); margin: 18px 0; }
.text-primary, .text-hover-primary:hover { color: var(--pp-brand-600) !important; }
.bg-primary { background-color: var(--pp-brand-600) !important; }
.pp-scroll-x { overflow-x: auto; }

@media (max-width: 991.98px) {
  :root { --pp-header-h: 104px; }
  .pp-topbar-inner { height: 64px; padding: 0 16px; }
  .pp-nav-scroll { justify-content: flex-start; }
  .pp-hero { padding: 14px 20px 15px; border-radius: var(--pp-r-lg); }
  .pp-hero-title { font-size: 19px; }
  .app-container { padding-inline: 14px !important; }
}

/* ==================================================== sidebar tree + panel === */

.pp-layout { display: flex; align-items: stretch; gap: 22px; }
.pp-layout-side { flex: 0 0 300px; max-width: 300px; display: flex; flex-direction: column; min-height: 0; }
.pp-layout-main { flex: 1 1 auto; min-width: 0; }

/* Keep the card in place: the two columns scroll independently, the page doesn't
   keep growing underneath them. Height is viewport-relative, offset by the sticky
   header plus the hero/card-header chrome sitting above this card. */
.pp-layout-side,
.pp-layout-main {
  height: calc(100vh - var(--pp-header-h) - 198px);
  min-height: 380px;
}
.pp-layout-main { overflow-y: auto; overflow-x: hidden; padding-right: 4px; }

/* The "Products & sections"/"Types & sections" label is a true, non-scrolling
   flex sibling — not a sticky trick — so it can never collide with the
   top-level product/type row's own sticky positioning inside the scroller
   below it (two sticky elements racing for the same top:0 would overlap). */
.pp-layout-side > .pp-section-title { flex: 0 0 auto; margin-bottom: 10px; }
.pp-layout-side > .pp-tree-scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding-right: 6px;
}

@media (max-width: 991.98px) {
  .pp-layout { flex-direction: column; }
  .pp-layout-side { flex: 1 1 auto; max-width: none; width: 100%; height: 46vh; min-height: 260px; }
  .pp-layout-main { height: 60vh; }
}

.pp-tree {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--pp-page-bg);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-r-lg);
  padding: 6px;
}
.pp-tree-group { border-radius: var(--pp-r); }
.pp-tree-group + .pp-tree-group { margin-top: 2px; }
.pp-tree-group.is-open { background: var(--pp-card-bg); box-shadow: var(--pp-sh-1); }

.pp-tree-head {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 10px 10px; border: 0; background: transparent; text-align: left;
  border-radius: var(--pp-r); cursor: pointer;
  font-family: var(--pp-font-display);
  font-size: 13px; font-weight: 700; color: var(--pp-ink-2);
  transition: background .12s ease;
}
.pp-tree-group.is-open > .pp-tree-head { color: var(--pp-ink); }
.pp-tree-head:hover { background: var(--pp-hover); }
.pp-tree-head-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-tree-head-count {
  flex: 0 0 auto; padding: 1px 8px; border-radius: 99px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .01em;
  color: var(--pp-slate-ink); background: var(--pp-slate-bg);
}
.pp-tree-chevron { flex: 0 0 auto; color: var(--pp-ink-4); transition: transform .16s ease; }
.pp-tree-group.is-open > .pp-tree-head .pp-tree-chevron { transform: rotate(90deg); color: var(--pp-brand-600); }

.pp-tree-sections {
  list-style: none; margin: 0; padding: 2px 8px 8px 8px; display: none;
  border-left: 2px solid var(--pp-line); margin-left: 20px;
}
.pp-tree-group.is-open > .pp-tree-sections { display: flex; flex-direction: column; gap: 1px; }

/* BOM Management's type-level groups collapse a nested BOM list + its
   Add product/Upload BOM actions, not a .pp-tree-sections list directly. */
.pp-tree-boms, .pp-tree-actions { display: none; }
.pp-tree-group.is-open > .pp-tree-boms { display: flex; flex-direction: column; gap: 1px; }
.pp-tree-group.is-open > .pp-tree-actions { display: flex; }

.pp-tree-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 10px; margin-left: 2px; border: 0; background: transparent; text-align: left;
  border-radius: var(--pp-r-sm); cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--pp-ink-3);
  transition: background .12s ease, color .12s ease;
}
.pp-tree-item svg { flex: 0 0 auto; opacity: .75; }
.pp-tree-item:hover { background: var(--pp-hover); color: var(--pp-ink-2); }
.pp-tree-item.active {
  background: var(--pp-brand-50); color: var(--pp-brand-700); font-weight: 700;
  box-shadow: inset 2px 0 0 var(--pp-brand-600);
}
.pp-tree-item.active svg { opacity: 1; color: var(--pp-brand-600); }
.pp-tree-item-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-tree-item-count {
  flex: 0 0 auto; min-width: 18px; padding: 1px 6px; border-radius: 99px; text-align: center;
  font-size: 10.5px; font-weight: 700; color: var(--pp-ink-4); background: var(--pp-page-bg);
}
.pp-tree-item.active .pp-tree-item-count { color: var(--pp-brand-700); background: var(--pp-brand-100); }

.pp-tree-head:focus-visible,
.pp-tree-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--pp-card-bg), 0 0 0 4px var(--pp-brand-400);
}

/* The group holding whatever's currently on screen can't be collapsed —
   the chevron reads as "locked open" instead of a normal toggle. */
.pp-tree-group.is-open:has(.pp-tree-item.active) > .pp-tree-head {
  cursor: default;
}
.pp-tree-group.is-open:has(.pp-tree-item.active) > .pp-tree-head .pp-tree-chevron {
  opacity: .45;
}

.pp-tree-actions { gap: 6px; padding: 4px 8px 10px 30px; }

/* Nested BOM-under-Type groups (BOM Management) */
.pp-tree-boms { flex-direction: column; gap: 1px; padding: 0 8px 6px 8px; }
.pp-tree-group-nested { margin-left: 12px; border-left: 2px solid var(--pp-line); border-radius: 0; }
.pp-tree-group-nested.is-open { background: transparent; box-shadow: none; }
.pp-tree-head-nested { padding: 8px 10px; font-size: 12px; }
.pp-tree-head-nested .pp-tree-head-count {
  background: transparent; color: var(--pp-ink-4); font-weight: 600; text-transform: none;
  letter-spacing: 0; padding: 0; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pp-tree-group-nested .pp-tree-sections { margin-left: 18px; }

/* Keep the top-level product/type row (and its collapse chevron + Add product /
   Upload BOM actions) reachable while its own contents scroll underneath it —
   only the outer row sticks, not each nested BOM row, so they don't all pile
   up at the same top:0 line. */
.pp-tree-group:not(.pp-tree-group-nested) > .pp-tree-head {
  position: sticky; top: 0; z-index: 3;
}
.pp-tree-group.is-open:not(.pp-tree-group-nested) > .pp-tree-head {
  background: var(--pp-card-bg);
}