/* --- Outer tab card: white shell, like the top "Price Intelligence" card --- */
.pi-tab-card {
  background-color: #ffffff !important;
  border: 1px solid #d4ddec;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

/* Tab header strip (Pack monitor / Online pharmacies / Price notifications) */
.pi-tab-card-header {
  background-color: #ffffff !important;
  border-bottom: 1px solid #d4ddec;
}

/* Card body itself stays transparent – the tray lives inside .pi-tab-bodies */
.pi-tab-card-body {
  background-color: transparent !important;
}

/* --- Inner tray: tinted background behind "Packs" and "Pack details" --- */
.pi-tab-bodies {
  background-color: #f3f6ff;           /* soft bluish tray, like Global filters */
  border-radius: 0 0 10px 10px;        /* round bottom corners inside the card */
  padding: 0.75rem 1rem;               /* white margin between shell and tray */
}

/* Make sure the specific tab body doesn’t override the tray color */
#pi-body-competitor_surveillance {
  background-color: transparent !important;
}

/* --- Inner section cards: "Packs" and "Pack details" sit on white --- */
#tab-body-overview > .card.shadow-sm {
  background-color: #ffffff !important;
  border: 1px solid #d4ddec;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

/* Kill any leftover accent bar from earlier experiments */
#tab-body-overview > .card.shadow-sm::before {
  content: none !important;
}

/* Headers inside those cards ("Packs", "Pack details") */
#tab-body-overview .custom-card-header {
  background-color: #f8faff;
  border-bottom: 1px solid #d4ddec;
}
/* Outer tab card: keep it white, like the top "Price Intelligence" card */
.pi-tab-card {
  background-color: #ffffff !important;
  border: 1px solid #d5dce8;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

/* Tabs strip at the top */
.pi-tab-card-header {
  background-color: #ffffff !important;
  border-bottom: 1px solid #d5dce8;
}

/* This is the layer we proved with the black test.
   Now tint it instead of black: the "tray" behind Packs + Pack details. */
.pi-tab-card-body,
.pi-tab-card-body .pi-tab-bodies,
.pi-tab-card-body .container-fluid,
#pi-body-competitor_surveillance {
  background-color: #f3f6ff !important;  /* soft bluish-grey tray */
}

/* Inner section cards: keep them white on top of the tray */
#tab-body-overview > .card.shadow-sm {
  background-color: #ffffff !important;
  border: 1px solid #d1d8e8;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.10);
}

/* No colored strip on top of those cards */
#tab-body-overview > .card.shadow-sm::before {
  content: none !important;
}

/* Headers inside those cards ("Packs", "Pack details") */
#tab-body-overview .custom-card-header {
  background-color: #f8faff;
  border-bottom: 1px solid #d1d8e8;
}
/* 1) Outer tab card: white shell, like the top "Price Intelligence" card */
.pi-tab-card {
  background-color: #ffffff !important;
  border: 1px solid #d5dce8;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.pi-tab-card-header {
  background-color: #ffffff !important;
  border-bottom: 1px solid #d5dce8;
}

/* 2) Inner tray: tinted background behind "Packs" and "Pack details"
   (this is the layer we turned black earlier) */
.pi-tab-card-body,
.pi-tab-card-body .pi-tab-bodies,
.pi-tab-card-body .container-fluid,
#pi-body-competitor_surveillance {
  background-color: #f1f3f9 !important;  /* stronger tint so it’s clearly not white */
}

/* 3) Inner section cards ("Packs" and "Pack details"): stay white on top */
#tab-body-overview > .card {
  background-color: #ffffff !important;
  border: 1px solid #d1d8e8;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.10);
}

/* No leftover accent strip from earlier experiments */
#tab-body-overview > .card::before {
  content: none !important;
}

/* Headers inside those cards */
#tab-body-overview .custom-card-header {
  background-color: #f8faff;
  border-bottom: 1px solid #d1d8e8;
}
/* ACTIVE TAB – eggshell + subtle outline */
#pi-tabs .nav-link.active {
    background-color: #fdfbf5 !important;      /* eggshell: almost white, slightly warm */


    border: 1px solid #e5e1d5 !important;      /* soft, subtle outline */
    border-bottom-color: #fdfbf5 !important;   /* blend into the tab/card */
}