/* ================================================================
   23_settings.css
   Settings panel, ATC filter, PI tabs, global overrides
   (Was: zz_settings.css + zz_settings2.css — loads last intentionally)
   ================================================================ */

/* =====================================================================
   Life Science Pro — Shared UI + Price Intelligence tabs
   File: /assets/settings.css
   ===================================================================== */

/* -------------------- Design tokens (unchanged) -------------------- */
:root {
  /* Surfaces */
  --surface-glass: rgba(16, 38, 79, .78);
  --surface-glass-weak: rgba(255, 255, 255, .03);

  /* Borders / dividers */
  --border-glass: rgba(255, 255, 255, .10);
  --divider-glass: rgba(255, 255, 255, .06);

  /* Text */
  --text-strong: rgba(255, 255, 255, .96);
  --text-muted:  rgba(255, 255, 255, .72);

  /* Radii & elevation */
  --radius-lg: 18px;
  --radius-md: 12px;
  --elev-3: 0 16px 40px rgba(0, 0, 0, .35);

  /* Brand accent (falls back to existing --secondary-color) */
  --brand-accent: var(--secondary-color, #2FA0FF);

  /* Focus ring */
  --focus-ring: 0 0 0 2px rgba(72, 168, 255, .60);

  /* Layout helpers */
  --settings-footer-h: 76px;
  --toast-width: min(92vw, 420px);
}

/* =====================================================================
   AG Grid – unified background
   ===================================================================== */

.ag-theme-alpine.custom-ag-grid {
  --ag-background-color: #ffffff;
  --ag-header-background-color: #ffffff;
  --ag-odd-row-background-color: #ffffff;
}

.ag-theme-alpine.custom-ag-grid .ag-center-cols-viewport,
.ag-theme-alpine.custom-ag-grid .ag-body-viewport,
.ag-theme-alpine.custom-ag-grid .ag-center-cols-container,
.ag-theme-alpine.custom-ag-grid .ag-pinned-left-cols-viewport,
.ag-theme-alpine.custom-ag-grid .ag-pinned-right-cols-viewport,
.ag-theme-alpine.custom-ag-grid .ag-pinned-left-header,
.ag-theme-alpine.custom-ag-grid .ag-pinned-right-header {
  background-color: #f8f9fa !important;   /* same grey as page */
}

/* =====================================================================
   Global filters – currency “locked” chip
   ===================================================================== */

.pi-currency-chip .btn {
  opacity: 0.6;
  cursor: default;
}

.pi-currency-chip .bi-lock,
.pi-currency-chip .bi-lock-fill {
  font-size: 0.8em;
}

/* =====================================================================
   Current view card (Global filters + Period overview)
   ===================================================================== */

/* Pale rectangles inside the “Current view” card */
.pi-view-settings-card .pi-view-section {
  background-color: #f1f3f9;    /* same surface as inactive tabs */
  border: 1px solid #cfd6e8;
  border-radius: 0.375rem;
}

.pi-view-settings-card .pi-view-section--filters {
  padding: 0.5rem 0.75rem;
  margin-right: 0.75rem;
}

.pi-view-settings-card .pi-view-section--period {
  padding: 0.5rem 0.75rem;
  margin-left: 0.75rem;
}

/* Period pills stretch across the section */
.pi-view-settings-card .pi-view-section--period .timeline-bar {
  width: 100%;
  margin-top: 0;
}

.pi-view-settings-card .pi-view-section--period .timeline-pill {
  flex: 1 1 0;
  min-width: 0;
}

/* Space between “Current view” and the tabs card */
.pi-context-row {
  margin-bottom: 0.5rem;
}

/* =====================================================================
   Price Intelligence – Tabs card shell
   (Pack monitor / Online pharmacies / Price notifications)
   ===================================================================== */



/* Remove Bootstrap tab bar styling */
.pi-underline-tabs .nav{
  border-bottom: 0 !important;
  gap: 42px;                 /* spacing between labels */
}

/* Base tab appearance */
.pi-underline-tabs .nav-link{
  border: 0 !important;
  background: transparent !important;
  color: #8a8f98;            /* muted */
  font-weight: 500;
  padding: 0 0 12px 0;       /* creates room for underline */
  margin: 0;
  position: relative;
}

/* Hover */
.pi-underline-tabs .nav-link:hover{
  color: #2b2f36;
}

/* Active tab text */
.pi-underline-tabs .nav-link.active{
  color: #000;
  font-weight: 700;
}

/* Active underline (matches your screenshot style) */
.pi-underline-tabs .nav-link.active::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: #000;
  border-radius: 2px;
}

/* ── Extended Settings & PI Overrides (was: zz_settings2.css) ── */

/* -------------------- Backdrop -------------------- */
.offcanvas-backdrop.show {
  background-color: rgba(4, 10, 24, 0.40);
}

/* ======================================================================
   Settings / Custom Drawer — Modern Dark
   ====================================================================== */

/* Drawer Surface -------------------------------------------------------- */
.offcanvas.settings-drawer,
.offcanvas.custom-offcanvas {
  --bs-offcanvas-width: min(92vw, 420px);

  /* Slightly more opaque than modals, but not black */
  background: rgba(16, 38, 79, 0.90);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);

  color: var(--text-strong);
  border-left: 1px solid var(--border-glass);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow: var(--elev-3);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s;

  /* Lock to viewport height to prevent “overshoot” on open */
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden; /* the inner list owns scrolling */
}

@media (max-width: 576px) {
  .offcanvas.settings-drawer,
  .offcanvas.custom-offcanvas {
    border-radius: 0;
  }
}

/* Header --------------------------------------------------------------- */
.settings-drawer .offcanvas-header,
.custom-offcanvas .offcanvas-header {
  border-bottom: 1px solid var(--divider-glass);
}

.settings-drawer .btn-close,
.custom-offcanvas .btn-close {
  filter: invert(1) opacity(0.75);
}
.settings-drawer .btn-close:hover,
.custom-offcanvas .btn-close:hover {
  opacity: 1;
}

/* Title --------------------------------------------------------------- */
.settings-drawer .offcanvas-title,
.custom-offcanvas .offcanvas-title,
.drawer-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.2px;
}

/* -------------------- Icon Token (match home tiles) ------------------- */
.icon-token {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-glass);
}
.icon-token > i {
  font-size: 1rem;
  line-height: 1;
}

/* -------------------- Layout: single scroll area ---------------------- */
.settings-drawer .offcanvas-body,
.custom-offcanvas .offcanvas-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 16px;
  overflow: hidden !important; /* body doesn't scroll; the list will */
}

/* Accordion as flex column so its content can shrink/grow */
.settings-drawer .accordion,
.custom-offcanvas .accordion {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Each item is a column; header is fixed, collapse region is flexible */
.settings-drawer .accordion-item,
.custom-offcanvas .accordion-item {
  background: transparent;
  border-color: var(--divider-glass);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.settings-drawer .accordion-header,
.custom-offcanvas .accordion-header {
  flex: 0 0 auto;
}

/* Respect Bootstrap’s display:none on hidden collapse.
   When shown, switch to flex so children can layout. */
.settings-drawer .accordion-collapse.collapse.show,
.custom-offcanvas .accordion-collapse.collapse.show {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* Overshoot guard: disable the height animation that causes the “jump” */
.custom-offcanvas .accordion .collapsing {
  height: auto !important;
  transition: none !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.settings-drawer .accordion-body,
.custom-offcanvas .accordion-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
}

/* Sections & Panels ----------------------------------------------------- */
.drawer-section {
  padding: 8px 12px 0;
}

.glass-panel {
  background: var(--surface-glass-weak);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
}

/* -------------------- Accordion look ---------------------------------- */
.settings-drawer .accordion-button,
.custom-offcanvas .accordion-button {
  background: transparent;
  color: var(--text-strong);
  box-shadow: none;
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
}
.settings-drawer .accordion-button:not(.collapsed),
.custom-offcanvas .accordion-button:not(.collapsed) {
  color: var(--text-strong);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px var(--border-glass);
}
.settings-drawer .accordion-button::after,
.custom-offcanvas .accordion-button::after {
  filter: invert(1) opacity(0.85);
}

/* -------------------- Inputs on glass --------------------------------- */
.settings-drawer .form-control,
.custom-offcanvas .form-control,
.form-control-glass {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-strong);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
}

.settings-drawer .form-control::placeholder,
.custom-offcanvas .form-control::placeholder,
.form-control-glass::placeholder {
  color: var(--text-muted);
}

.settings-drawer .form-control:focus,
.custom-offcanvas .form-control:focus,
.form-control-glass:focus {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: rgba(72, 168, 255, 0.65);
}

/* Search + actions row (consistent 40px controls) ----------------------- */
.settings-drawer .action-row,
.custom-offcanvas .action-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.settings-drawer .action-row .spacer,
.custom-offcanvas .action-row .spacer {
  flex: 1;
}

.settings-drawer .atc-search,
.custom-offcanvas .atc-search {
  height: 40px;
  padding-left: 2.25rem;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-strong);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.settings-drawer .atc-search::placeholder,
.custom-offcanvas .atc-search::placeholder {
  color: var(--text-muted);
}

/* Plain white magnifying glass (no disc, no animation) */
.settings-drawer .input-icon,
.custom-offcanvas .input-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 1;
  color: #ffffff;
  opacity: 0.95;
  background: none !important;
  box-shadow: none !important;
  width: auto;
  height: auto;
  pointer-events: none;
  transition: none;
}
.settings-drawer .input-icon svg,
.settings-drawer .input-icon svg * {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Ensure buttons in the action row never wrap and match input height */
.settings-drawer .action-row .btn,
.custom-offcanvas .action-row .btn {
  white-space: nowrap;
  height: 40px;
  line-height: 24px;
  padding: 0.45rem 0.9rem;
  border-radius: 10px;
  flex: 0 0 auto;
  min-width: max-content;
}

.settings-drawer .action-row .form-control,
.custom-offcanvas .action-row .form-control {
  flex: 1 1 auto;
  min-width: 0;
}

/* -------------------- Checklist --------------------------------------- */
.atc-checklist .form-check {
  margin-bottom: 0.35rem;
}
.atc-checklist .form-check-label {
  color: var(--text-strong);
}
.atc-checklist .form-check-input {
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  box-shadow: none;
}
.atc-checklist .form-check-input:focus {
  box-shadow: var(--focus-ring);
  border-color: rgba(72, 168, 255, 0.65);
}
.atc-checklist .form-check-input:checked {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
}

/* List container – the ONLY scroller ----------------------------------- */
.settings-drawer .atc-list,
.custom-offcanvas .atc-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto !important;
  overscroll-behavior: contain;  /* keep scroll from bubbling to body */
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  padding: 8px 4px;
  /* Reserve space so the sticky footer never covers the last items */
  padding-bottom: calc(var(--settings-footer-h) + 12px) !important;
  scrollbar-gutter: stable; /* avoid width shift when scrollbar appears */
}

/* Subtle dividers within lists ----------------------------------------- */
.settings-drawer .list-group-item {
  background: transparent;
  color: var(--text-strong);
  border-color: var(--divider-glass);
}

/* -------------------- Sticky Footer (actions) ------------------------- */
.settings-drawer .drawer-footer,
.custom-offcanvas .offcanvas-footer {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-height: var(--settings-footer-h);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;

  padding: 12px var(--bs-offcanvas-padding-x, 16px);
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));

  margin-left: calc(-1 * var(--bs-offcanvas-padding-x, 16px));
  margin-right: calc(-1 * var(--bs-offcanvas-padding-x, 16px));

  /* Same “weight” as body – no dark chin */
  background: rgba(16, 38, 79, 0.94);
  border-top: 1px solid var(--divider-glass);
  z-index: 3;
}

/* -------------------- Buttons (match modals) -------------------------- */
.settings-drawer .btn-primary,
.custom-offcanvas .btn-primary {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
  font-weight: 600;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.05s ease;
}
.settings-drawer .btn-primary:hover,
.custom-offcanvas .btn-primary:hover {
  filter: brightness(1.03);
}
.settings-drawer .btn-primary:active,
.custom-offcanvas .btn-primary:active {
  filter: brightness(0.97);
}
.settings-drawer .btn-primary:disabled,
.custom-offcanvas .btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.settings-drawer .btn-ghost,
.custom-offcanvas .btn-ghost,
.settings-drawer .btn-cancel,
.custom-offcanvas .btn-cancel {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text-strong);
}
.settings-drawer .btn-ghost:hover,
.custom-offcanvas .btn-ghost:hover,
.settings-drawer .btn-cancel:hover,
.custom-offcanvas .btn-cancel:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Make Select all / Clear feel like link-ish buttons */
.settings-drawer .btn-ghost,
.custom-offcanvas .btn-ghost {
  font-weight: 500;
  padding-inline: 0.8rem;
  font-size: 0.875rem;
}

.settings-drawer .btn:focus-visible,
.custom-offcanvas .btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* If you still render "Close" as a link button somewhere */
.settings-drawer .btn-link,
.custom-offcanvas .btn-link {
  color: var(--text-muted);
  text-decoration: none;
}
.settings-drawer .btn-link:hover,
.custom-offcanvas .btn-link:hover {
  color: var(--text-strong);
  text-decoration: underline;
}

/* -------------------- Badges (live selection count) ------------------- */
.setting-badge {
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid var(--border-glass);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  color: var(--text-strong);
}

/* -------------------- Scrollbar (list) -------------------------------- */
.settings-drawer .atc-list,
.custom-offcanvas .atc-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.20) transparent;
}
.settings-drawer .atc-list::-webkit-scrollbar,
.custom-offcanvas .atc-list::-webkit-scrollbar {
  width: 10px;
}
.settings-drawer .atc-list::-webkit-scrollbar-thumb,
.custom-offcanvas .atc-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.settings-drawer .atc-list::-webkit-scrollbar-thumb:hover,
.custom-offcanvas .atc-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.32);
}

/* Back-compat: if markup still uses #atc-options-container, style its scrollbar too */
#atc-options-container::-webkit-scrollbar {
  width: 10px;
}
#atc-options-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
}
#atc-options-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
#atc-options-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.32);
}

/* -------------------- ATC Quickbar (if/when you enable it) ------------ */
.atc-quickbar {
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border-bottom: 1px solid var(--border-glass);
}
.atc-quickbar .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-strong);
  border: 1px solid var(--border-glass);
  font-size: 0.85rem;
}
.atc-quickbar .chip .remove {
  opacity: 0.7;
  cursor: pointer;
}
.atc-quickbar .chip .remove:hover {
  opacity: 1;
}

/* -------------------- A11y / Reduced Motion --------------------------- */
@media (prefers-reduced-motion: reduce) {
  .offcanvas.settings-drawer,
  .offcanvas.custom-offcanvas,
  .offcanvas.settings-drawer *,
  .offcanvas.custom-offcanvas * {
    transition: none !important;
  }
}

/* =========================================================
   Glass text-color cascade
   Forces light text on EVERY common Bootstrap / Dash element
   that inherits a dark-text default inside the drawer.
   ========================================================= */
.custom-offcanvas,
.custom-offcanvas .offcanvas-body,
.custom-offcanvas label,
.custom-offcanvas p,
.custom-offcanvas span,
.custom-offcanvas small,
.custom-offcanvas li,
.custom-offcanvas td,
.custom-offcanvas th,
.custom-offcanvas .form-label,
.custom-offcanvas .form-check-label,
.custom-offcanvas .accordion-body,
.custom-offcanvas .accordion-body *,
.custom-offcanvas .card-body,
.custom-offcanvas .list-group-item,
.custom-offcanvas .dropdown-item {
  color: var(--text-strong, rgba(255,255,255,.92));
}

/* Muted helpers */
.custom-offcanvas .text-muted,
.custom-offcanvas .text-secondary,
.custom-offcanvas small.text-muted {
  color: var(--text-muted, rgba(255,255,255,.55)) !important;
}

/* Override .text-dark, .text-body which Bootstrap sets to near-black */
.custom-offcanvas .text-dark,
.custom-offcanvas .text-body {
  color: var(--text-strong, rgba(255,255,255,.92)) !important;
}

/* Badges – invert so they read on glass */
.custom-offcanvas .badge {
  color: var(--text-strong, rgba(255,255,255,.90));
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
}
.custom-offcanvas .badge.bg-primary,
.custom-offcanvas .badge.bg-secondary,
.custom-offcanvas .badge.text-bg-primary,
.custom-offcanvas .badge.text-bg-secondary {
  color: #fff;
}

/* Inline-styled pills (e.g. swimlane summary) — override inline color */
.custom-offcanvas .rounded-pill {
  color: rgba(255,255,255,.88) !important;
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.15) !important;
}

/* Sticky control bar (e.g. episodes offcanvas) — glass-friendly */
.custom-offcanvas .sh-epbar {
  background: rgba(16, 38, 79, 0.85) !important;
  border-bottom-color: rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(10px);
}

/* Quick-filter pill buttons inside drawers */
.custom-offcanvas .epf-btn {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,.82) !important;
}
.custom-offcanvas .epf-btn:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.22) !important;
  color: #fff !important;
}
.custom-offcanvas .epf-btn.epf-btn--selected,
.custom-offcanvas .epf-btn[aria-pressed="true"] {
  background: rgba(47, 160, 255, 0.16) !important;
  border-color: rgba(47, 160, 255, 0.35) !important;
  color: #48a8ff !important;
}

/* Compact dropdown inside drawers (e.g. ep sort) */
.custom-offcanvas .dd-compact .Select-control {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: var(--text-strong, rgba(255,255,255,.88)) !important;
}
.custom-offcanvas .dd-compact .Select-value-label,
.custom-offcanvas .dd-compact .Select-placeholder {
  color: var(--text-strong, rgba(255,255,255,.82)) !important;
}
.custom-offcanvas .dd-compact .Select-arrow {
  border-top-color: rgba(255,255,255,.5) !important;
}

/* Generic borders inside drawers (glass-friendly) */
.custom-offcanvas .border-top {
  border-color: rgba(255,255,255,0.10) !important;
}

/* Links inside the drawer */
.custom-offcanvas a:not(.btn) {
  color: var(--brand-accent, #48a8ff);
}

/* Dropdown menus that open inside the drawer */
.custom-offcanvas .dropdown-menu {
  background: rgba(16, 38, 79, 0.96);
  border: 1px solid var(--border-glass, rgba(255,255,255,.10));
  backdrop-filter: blur(12px);
}
.custom-offcanvas .dropdown-menu .dropdown-item {
  color: var(--text-strong, rgba(255,255,255,.88));
}
.custom-offcanvas .dropdown-menu .dropdown-item:hover,
.custom-offcanvas .dropdown-menu .dropdown-item:focus {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

/* Dash dcc.Dropdown — light text in the control and menu */
/* Legacy (.Select-*) AND modern (.Select__*) react-select classes */
.custom-offcanvas .Select-control,
.custom-offcanvas .Select--single > .Select-control,
.custom-offcanvas .Select__control,
.custom-offcanvas .dash-dropdown .Select-control,
.custom-offcanvas .dash-dropdown .Select__control {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: var(--text-strong, rgba(255,255,255,.88)) !important;
}
.custom-offcanvas .Select-value-label,
.custom-offcanvas .Select-placeholder,
.custom-offcanvas .Select-input > input,
.custom-offcanvas .Select__single-value,
.custom-offcanvas .Select__placeholder,
.custom-offcanvas .Select__input-container,
.custom-offcanvas .Select__input-container input {
  color: var(--text-strong, rgba(255,255,255,.88)) !important;
}
.custom-offcanvas .Select-menu-outer,
.custom-offcanvas .Select__menu {
  background: rgba(16, 38, 79, 0.97) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(12px);
}
.custom-offcanvas .Select-option,
.custom-offcanvas .Select__option {
  color: var(--text-strong, rgba(255,255,255,.88)) !important;
  background: transparent !important;
}
.custom-offcanvas .Select-option.is-focused,
.custom-offcanvas .Select__option--is-focused {
  background: rgba(255,255,255,0.08) !important;
}
.custom-offcanvas .Select-option.is-selected,
.custom-offcanvas .Select__option--is-selected {
  background: rgba(255,255,255,0.14) !important;
}
.custom-offcanvas .Select-arrow-zone,
.custom-offcanvas .Select-clear-zone,
.custom-offcanvas .Select__indicator,
.custom-offcanvas .Select__dropdown-indicator,
.custom-offcanvas .Select__clear-indicator {
  color: rgba(255,255,255,.5) !important;
}
.custom-offcanvas .Select__multi-value {
  background: rgba(255,255,255,0.10);
  border-radius: 4px;
}
.custom-offcanvas .Select__multi-value__label {
  color: var(--text-strong, rgba(255,255,255,.85)) !important;
}
.custom-offcanvas .Select__multi-value__remove {
  color: rgba(255,255,255,.6) !important;
}
.custom-offcanvas .Select__multi-value__remove:hover {
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}
/* VirtualizedSelect fallback */
.custom-offcanvas .VirtualizedSelectOption,
.custom-offcanvas .VirtualizedSelectFocusedOption {
  color: var(--text-strong, rgba(255,255,255,.88)) !important;
  background: transparent !important;
}
.custom-offcanvas .VirtualizedSelectFocusedOption {
  background: rgba(255,255,255,0.08) !important;
}

/* Dash DatePickerRange — force glass-friendly palette */
.custom-offcanvas .DateInput_input,
.custom-offcanvas .DateInput_input__focused {
  background: rgba(255,255,255,0.05) !important;
  color: var(--text-strong, rgba(255,255,255,.90)) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
.custom-offcanvas .DateRangePickerInput,
.custom-offcanvas .DateRangePickerInput__withBorder,
.custom-offcanvas .SingleDatePickerInput,
.custom-offcanvas .SingleDatePickerInput__withBorder {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
.custom-offcanvas .DateRangePickerInput_arrow svg {
  fill: rgba(255,255,255,.5);
}
.custom-offcanvas .DateRangePickerInput_clearDates,
.custom-offcanvas .DateRangePickerInput_clearDates svg {
  fill: rgba(255,255,255,.5);
}
.custom-offcanvas .DateInput_input::placeholder {
  color: var(--text-muted, rgba(255,255,255,.5)) !important;
}
/* Calendar popup stays on light background (it floats above) */
.custom-offcanvas .DayPicker,
.custom-offcanvas .CalendarMonth,
.custom-offcanvas .CalendarMonthGrid {
  background: #fff !important;
}

/* Plotly charts inside drawers — transparent background */
.custom-offcanvas .js-plotly-plot .main-svg,
.custom-offcanvas .js-plotly-plot .plot-container {
  background: transparent !important;
}
.custom-offcanvas .modebar { opacity: 0.6; }
.custom-offcanvas .modebar:hover { opacity: 1; }
.custom-offcanvas .modebar-btn path { fill: rgba(255,255,255,.6) !important; }

/* DBC Checklist / RadioItems */
.custom-offcanvas .form-check-input {
  background-color: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
}
.custom-offcanvas .form-check-input:checked {
  background-color: var(--brand-accent, var(--secondary-color));
  border-color: var(--brand-accent, var(--secondary-color));
}

/* Button outlines – make secondary/outline buttons readable */
.custom-offcanvas .btn-outline-secondary,
.custom-offcanvas .btn-outline-primary {
  color: var(--text-strong, rgba(255,255,255,.85));
  border-color: rgba(255,255,255,0.25);
}
.custom-offcanvas .btn-outline-secondary:hover,
.custom-offcanvas .btn-outline-primary:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

/* Cards / list-group inside drawers */
.custom-offcanvas .card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.custom-offcanvas .list-group-item {
  background: transparent;
  border-color: rgba(255,255,255,0.08);
}

/* White-card wrapper inside glass drawers — keep light for grid readability
   but soften from pure #fff and ensure rounded containment */
.custom-offcanvas .pi-oc-white-card {
  background: #f5f7fa !important;
  border: 1px solid rgba(200,210,230,0.6) !important;
  border-radius: 12px !important;
  overflow: hidden;
}
.custom-offcanvas .pi-oc-grid-wrap {
  border-radius: 10px;
  overflow: hidden;
}

/* ── Reset text back to DARK inside the white card (undo glass cascade) ── */
.custom-offcanvas .pi-oc-white-card,
.custom-offcanvas .pi-oc-white-card label,
.custom-offcanvas .pi-oc-white-card p,
.custom-offcanvas .pi-oc-white-card span,
.custom-offcanvas .pi-oc-white-card small,
.custom-offcanvas .pi-oc-white-card li,
.custom-offcanvas .pi-oc-white-card td,
.custom-offcanvas .pi-oc-white-card th,
.custom-offcanvas .pi-oc-white-card .form-label,
.custom-offcanvas .pi-oc-white-card .form-check-label,
.custom-offcanvas .pi-oc-white-card .dropdown-item,
.custom-offcanvas .pi-oc-white-card .form-control,
.custom-offcanvas .pi-oc-white-card .pi-search-input {
  color: #212529;
}
.custom-offcanvas .pi-oc-white-card .text-muted {
  color: #6c757d !important;
}
.custom-offcanvas .pi-oc-white-card .badge {
  color: inherit;
  background: revert;
  border: revert;
}
.custom-offcanvas .pi-oc-white-card .btn-outline-secondary,
.custom-offcanvas .pi-oc-white-card .btn-outline-primary,
.custom-offcanvas .pi-oc-white-card .clear-filters {
  color: #212529;
  border-color: #dee2e6;
  background: #fff;
}
.custom-offcanvas .pi-oc-white-card .btn-outline-secondary:hover,
.custom-offcanvas .pi-oc-white-card .btn-outline-primary:hover,
.custom-offcanvas .pi-oc-white-card .clear-filters:hover {
  background: #e9ecef;
  color: #212529;
}
.custom-offcanvas .pi-oc-white-card .pi-search-input {
  background-color: #ffffff;
  border-color: var(--pi-color-border-strong, #ced4da);
}
.custom-offcanvas .pi-oc-white-card .pi-search-input::placeholder {
  color: var(--pi-color-placeholder, #6c757d);
}
.custom-offcanvas .pi-oc-white-card a:not(.btn) {
  color: var(--pi-color-primary, #0066cc);
}
.custom-offcanvas .pi-oc-white-card hr {
  border-color: #dee2e6;
  opacity: 0.5;
}

/* Horizontal rule inside drawers */
.custom-offcanvas hr {
  border-color: rgba(255,255,255,0.10);
  opacity: 1;
}

/* -------------------- Utilities --------------------------------------- */
.text-muted-glass {
  color: var(--text-muted) !important;
}
.card-glass {
  background: var(--surface-glass-weak);
  border: 1px solid var(--border-glass);
  color: var(--text-strong);
  border-radius: var(--radius-md);
}

/* Small tweak carried over from PI settings */
.pi-view-settings-card .pi-period-overview-section .timeline-bar {
  margin-top: 0rem;
}

/* -------------------- Toast (compact glass, matches drawers) -------------------- */
/* dbc.Toast puts class on the .toast element itself */
.global-toast {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 2200;

  width: var(--toast-width);
  max-width: var(--toast-width);

  /* Same family as the drawers */
  background: rgba(16, 38, 79, 0.96) !important;
  border: 1px solid var(--border-glass) !important;
  color: var(--text-strong) !important;

  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow: var(--elev-3);
  border-radius: var(--radius-md);
  overflow: hidden;
  padding: 0 !important;

  /* Scoped tokens */
  --success-500: #1FD1A3;
  --success-500-rgb: 31, 209, 163;
  --toast-title: var(--text-strong);
  --toast-body:  var(--text-muted);

  /* CTA sizing (match drawer CTAs) */
  --cta-h: 40px;
  --cta-line: 24px;
  --cta-radius: 10px;
  --cta-py: .45rem;
  --cta-px: .9rem;

  /* Status dot size */
  --toast-status-size: 12px;/* =====================================================================
   Life Science Pro – Excel-style Filter Offcanvas
   Scope: .pi-filter-offcanvas (ATC class, Distributor, etc.)
   Matches Settings drawer style
   ===================================================================== */

/* Shell --------------------------------------------------------------- */

.pi-filter-offcanvas.offcanvas {
  --bs-offcanvas-width: min(92vw, 460px);

  width: var(--bs-offcanvas-width) !important;
  max-width: var(--bs-offcanvas-width) !important;

  background:
    radial-gradient(140% 180% at 20% 0%, rgba(70, 124, 230, 0.40) 0, transparent 55%),
    radial-gradient(180% 160% at 85% 100%, rgba(33, 210, 204, 0.25) 0, transparent 55%),
    var(--surface-glass);
  color: var(--text-strong);

  border-radius: var(--radius-lg);
  border: 1px solid var(--border-glass);
  box-shadow: var(--elev-3);

  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);

  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  padding: 0;
}

@media (max-width: 576px) {
  .pi-filter-offcanvas.offcanvas {
    border-radius: 0;
  }
}

/* Header -------------------------------------------------------------- */

.pi-filter-offcanvas .offcanvas-header {
  padding: 0.85rem 1.4rem;
  border-bottom: 1px solid var(--divider-glass);
}

.pi-filter-offcanvas .offcanvas-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.2px;
  color: var(--text-strong);
}

.pi-filter-offcanvas .btn-close {
  filter: invert(1) opacity(0.8);
}
.pi-filter-offcanvas .btn-close:hover {
  opacity: 1;
}

/* Body layout --------------------------------------------------------- */

.pi-filter-offcanvas .offcanvas-body {
  padding: 0.9rem 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ---------------------------------------------------------------------
   TOP CONTROLS: Search | Select all | Clear
   ------------------------------------------------------------------ */

/* Kill the white “card” wrapper and turn it into a row */
.pi-filter-offcanvas .offcanvas-body > .border-bottom.flex-shrink-0 {
  padding: 0 !important;
  margin: 0 0 0.75rem 0;
  border: 0 !important;
  background: transparent !important;

  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
}

/* Search input group occupies the left side */
.pi-filter-offcanvas
  .offcanvas-body
  > .border-bottom.flex-shrink-0
  > .input-group,
.pi-filter-offcanvas
  .offcanvas-body
  > .border-bottom.flex-shrink-0
  > .dash-input-group {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0 !important;
}

/* Squarish search input (same height family as Settings search) */
.pi-filter-offcanvas input[id$="-search-input"] {
  width: 100%;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(3, 17, 47, 0.95);
  color: var(--text-strong);
  padding: 0 0.8rem;
  font-size: 0.9rem;
}

.pi-filter-offcanvas input[id$="-search-input"]::placeholder {
  color: var(--text-muted);
  opacity: 0.9;
}

/* Buttons container (Select all / Clear) on the right */
.pi-filter-offcanvas
  .offcanvas-body
  > .border-bottom.flex-shrink-0
  > .mb-3 {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0 !important;
}

/* Base chip/button shape – squarish & fixed height */
.pi-filter-offcanvas
  .offcanvas-body
  > .border-bottom.flex-shrink-0
  .btn {
  width: auto !important;     /* override inline width:100% */
  height: 36px;
  padding: 0 1rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 0.9rem;
  box-shadow: none;
}

/* Select all (primary) – like “Save changes” */
.pi-filter-offcanvas .select-all-button {
  background-image: none;
  background-color: var(--brand-accent);
  border: 1px solid rgba(0, 0, 0, 0.45);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

/* Clear filters (secondary) – softer red, matches dark shell */
.pi-filter-offcanvas .btn-outline-danger {
  border-color: rgba(255, 201, 201, 0.8);
  color: rgba(255, 224, 224, 0.96);
  background-color: rgba(16, 38, 79, 0.55);
  font-weight: 500;
}
.pi-filter-offcanvas .btn-outline-danger:hover {
  background-color: rgba(255, 201, 201, 0.22);
  color: #ffe9e9;
}

/* ---------------------------------------------------------------------
   OPTIONS LIST: checklist + “Show all”
   ------------------------------------------------------------------ */

.pi-filter-offcanvas [id$="-options-container"] {
  flex: 1 1 auto;
  margin: 0;
  padding: 0.25rem 0 0.75rem;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Checklist items */
.pi-filter-offcanvas .form-check {
  margin-bottom: 0.45rem;
}
.pi-filter-offcanvas .form-check-label {
  color: var(--text-strong);
  font-weight: 500;
}

/* Bullet / checkbox style (slightly rounded squares → “squarish dot”) */
.pi-filter-offcanvas .form-check-input {
  width: 14px;
  height: 14px;
  margin-top: 0.15rem;
  border-radius: 6px;   /* <-- less round than Settings dot */
  background: var(--surface-glass-weak);
  border: 1px solid var(--border-glass);
  box-shadow: none;
}

.pi-filter-offcanvas .form-check-input:focus {
  box-shadow: var(--focus-ring);
  border-color: rgba(72, 168, 255, 0.75);
}

.pi-filter-offcanvas .form-check-input:checked {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
}

/* “Show all” button under the list */
.pi-filter-offcanvas .show-all-button {
  width: 100% !important;
  margin-top: 0.75rem;
  height: 32px;
  border-radius: 10px;
  background-color: rgba(6, 22, 55, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ---------------------------------------------------------------------
   FOOTER / APPLY BUTTON
   ------------------------------------------------------------------ */

.pi-filter-offcanvas .offcanvas-body > .p-3:last-child {
  margin-top: auto;
  padding: 0.75rem 0 0.25rem;
  border-top: 1px solid var(--divider-glass);
  background:
    linear-gradient(180deg, rgba(5, 18, 46, 0.96), rgba(2, 8, 26, 1));
}

/* Apply button – full width, same weight as Settings CTA */
.pi-filter-offcanvas .offcanvas-body .btn[id$="-apply"] {
  display: block;
  width: 100%;
  height: 40px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  background-color: var(--brand-accent);
  border-color: rgba(0, 0, 0, 0.55);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6);
  color: #ffffff;
}

/* Remove the extra margin added in the Python layout */
.pi-filter-offcanvas .offcanvas-body .btn[id$="-apply"].mt-2 {
  margin-top: 0;
}

  --toast-status-radius: 6px;
}

/* Header – same weight as drawer headers */
.global-toast .toast-header {
  background: rgba(16, 38, 79, 0.98) !important;
  color: var(--toast-title) !important;
  border-bottom: 1px solid var(--divider-glass) !important;
  font-weight: 600;
  letter-spacing: .18px;
  padding: .55rem .9rem;
  align-items: center;
}

/* Body */
.global-toast .toast-body {
  background: rgba(16, 38, 79, 0.96) !important;
  color: var(--toast-body) !important;
  padding: .7rem .9rem .85rem;
  font-size: .95rem;
  line-height: 1.4;
}

/* Actions row */
.global-toast .toast-actions {
  display: flex;
  gap: 8px;
  margin-top: .55rem;
}

/* Buttons inside toast — normalize .btn & .btn-sm to drawer CTA size */
.global-toast .btn,
.global-toast .btn-sm {
  height: var(--cta-h) !important;
  line-height: var(--cta-line) !important;
  padding: var(--cta-py) var(--cta-px) !important;
  border-radius: var(--cta-radius) !important;
  font-weight: 600 !important;
  font-size: .95rem !important;
  white-space: nowrap;
  box-shadow: none !important;
}

/* Primary (“Undo”) — same recipe as app primary CTA */
.global-toast .btn-primary {
  background-color: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
  color: #fff !important;
}
.global-toast .btn-primary:hover {
  filter: brightness(1.03);
}
.global-toast .btn-primary:active {
  filter: brightness(0.97);
}
.global-toast .btn-primary:focus-visible {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
}

/* Secondary (“Manage codes”) — ghost style like drawer buttons */
.global-toast .btn-outline-primary {
  color: var(--text-strong) !important;
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
.global-toast .btn-outline-primary:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}
.global-toast .btn-outline-primary:focus-visible {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
}

/* Success status: teal dot, minimal but on the same navy shell */
.global-toast,
.global-toast .toast-header {
  --bs-success: var(--success-500);
  --bs-success-rgb: var(--success-500-rgb);
}

/* Generic badge (covers bg-success/text-bg-success/rounded variants) */
.global-toast .toast-header .bg-success,
.global-toast .toast-header .text-bg-success,
.global-toast .toast-header .rounded,
.global-toast .toast-header [class*="bg-success"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin-right: .5rem !important;
  border-radius: 50%;
  background-color: var(--success-500) !important;
  border: 0 !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M6.03 10.97 3.53 8.47a.75.75 0 1 1 1.06-1.06l1.44 1.44 4.88-4.88a.75.75 0 1 1 1.06 1.06L7.56 10.97a.75.75 0 0 1-1.06 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}

/* Close affordance (soft blue → white on hover) */
.global-toast .btn-close {
  opacity: 1 !important;
  filter: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239EC5FF' viewBox='0 0 16 16'%3E%3Cpath d='M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 1 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E") !important;
  background-size: 1em 1em;
  background-position: center;
  background-repeat: no-repeat;
}
.global-toast .btn-close:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F4F7FF' viewBox='0 0 16 16'%3E%3Cpath d='M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 1 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E") !important;
}
/* Make the module title feel like a label */
.pi-view-settings-card .pi-module-title {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Outer shell: header card rounding */
.pi-view-settings-card,
.pi-view-settings-card .card-header {
  border-radius: 10px !important;
}

/* Inner tinted panels: header body rounding */
.pi-view-settings-card .card-body {
  border-radius: 8px !important;
}
/* Make custom card headers follow the card's rounding */
.card > .custom-card-header {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

/* Ensure the body below the header doesn't add extra rounding */
.card > .custom-card-header + .card-body {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}




/* TAB STRIP – applies to all tab bars */
.nav-tabs {
    background: transparent;
    border-bottom: 1px solid #e5e7eb;
    padding: 0;
    margin-top: -0.25rem;                      /* tweak per layout if needed */
}

/* BASE TAB ------------------------------------------------------------ */
.nav-tabs .nav-link {
    position: relative;
    padding: 0.3rem 0.9rem !important;
    margin-right: 0.25rem;

    background: transparent !important;
    border: 1px solid transparent !important;  /* <- keeps outline logic working */
    border-radius: 0.5rem 0.5rem 0 0 !important;   /* rounded top, square bottom */

    font-size: 0.9rem;
    font-weight: 500;
    color: #6b7280 !important;

    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

/* ACTIVE TAB ---------------------------------------------------------- */
.nav-tabs .nav-link.active {
    background: #f4f6fa !important;
    color: #2563eb !important;
    font-weight: 600;

    border-color: #d1d5db !important;          /* <- subtle grey outline */
    border-bottom-color: #f4f6fa !important;   /* blend into content/header */
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* HOVER (inactive) ---------------------------------------------------- */
.nav-tabs .nav-link:not(.active):hover {
    background: rgba(148,163,184,0.12) !important;
    color: #374151 !important;
    border-color: #e5e7eb !important;          /* light outline on hover */
}

/* FOCUS --------------------------------------------------------------- */
.nav-tabs .nav-link:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}
/* Add to your z_price_intelligence.css or similar */

/* Locked filter badges - subtle, non-interactive appearance */
.pi-view-section--filters .btn[disabled],
.pi-view-section--filters .btn.locked-filter {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #495057;
    cursor: default;
    opacity: 1;
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    box-shadow: none;
}

.pi-view-section--filters .btn[disabled]:hover,
.pi-view-section--filters .btn.locked-filter:hover {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    transform: none;
}


.pi-breadcrumb .breadcrumb { font-size: 0.8rem; margin-bottom: 0; }
.pi-breadcrumb .breadcrumb-item a { color: #6c757d; text-decoration: none; }
.pi-breadcrumb .breadcrumb-item a:hover { text-decoration: underline; }
.pi-breadcrumb .breadcrumb-item.active { color: #495057; }
/* Only top navbar, if you add .app-navbar to it */
.app-navbar .navbar-nav .nav-link {
  color: rgba(255,255,255,.75);
}

.app-navbar .navbar-nav .nav-link.active {
  color: #fff;
  font-weight: 600;
  border-bottom: 2px solid rgba(255,255,255,.9);
}


.shhist-toolbar-sep{
  height: 0; /* divider only */
  border-top: 1px solid rgba(0,0,0,.06);
  margin: .5rem 0 .25rem 0;  /* space above/below divider */
}

/* Clear filters = secondary "soft-outline" */
.btn-clear {
  height: 36px;               /* match your other buttons */
  padding: 0 14px;
  border-radius: 8px;
  font-weight: 600;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  /* hybrid: outline + subtle fill */
  background: var(--brand-50);     /* light tint */
  border: 1px solid var(--brand-200);
  color: var(--brand-700);

  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06); /* optional */
}

.btn-clear:hover {
  background: var(--brand-100);
  border-color: var(--brand-300);
}

.btn-clear:active {
  background: var(--brand-150);
  border-color: var(--brand-400);
}

.btn-clear:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px var(--brand-200),
    0 1px 2px rgba(16, 24, 40, 0.06);
}
/* Modernize Clear Filters with minimal changes */
.clear-filters{
  border-radius: 8px; /* ensure it's explicit */
  border-width: 1px;  /* 0.5px can look faint on some screens */

  box-shadow: none;

  transition:
    background-color 0.18s var(--transition-ease),
    color            0.18s var(--transition-ease),
    border-color     0.18s var(--transition-ease);
}

.clear-filters:hover{
  box-shadow: none;
}

.clear-filters:active{
  box-shadow: none;
  filter: brightness(0.95);
}

/* Only affect the tabs that live inside the section card header.
   This will NOT change the CardHeader sizing/padding. */
.pi-tab-card-header .nav {
  border-bottom: 0 !important;
  gap: 40px; /* adjust spacing between labels */
}

/* Kill pill/tab chrome: no bg, no borders, no rounded corners */
.pi-tab-card-header .nav-link {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;

  /* Keep Bootstrap's vertical padding so header height stays unchanged */
  padding: var(--bs-nav-link-padding-y) 0 !important;

  margin: 0 !important;
  color: #8a8f98 !important;
  font-weight: 500;
  position: relative;
}

/* Active tab: black text + underline (underline does not change layout height) */
.pi-tab-card-header .nav-link.active {
  color: #000 !important;
  font-weight: 700;
}

.pi-tab-card-header .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;           /* underline sits at the bottom of the link */
  height: 2px;
  background: #000;
  border-radius: 2px;
}

/* Hover */
.pi-tab-card-header .nav-link:hover {
  color: #2b2f36 !important;
}

/* If anything is forcing "pills", this neutralizes it too */
.pi-tab-card-header .nav-pills .nav-link.active,
.pi-tab-card-header .nav-tabs .nav-link.active {
  background: transparent !important;
}
/* Keep whatever your app already does for .pi-section-tabs.
   Only add underline behavior when .pi-underline-tabs is present. */
.pi-tab-card-header .pi-underline-tabs{
  /* kill bootstrap nav-tabs active border/background that looks like a “mark” */
  --bs-nav-tabs-border-width: 0;
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-border-color: transparent;
  --bs-nav-tabs-link-hover-border-color: transparent;

  /* (optional) if theme sets active color to blue, force black */
  --bs-nav-tabs-link-active-color: #000;
}

.pi-tab-card-header .pi-underline-tabs .nav-tabs{
  border-bottom: 0 !important;
}

/* Align tabs with card content start (matches p-2 / p-md-3 common spacing) */
.pi-tab-card-header .pi-underline-tabs .nav{
  padding-left: .5rem;
  padding-right: .5rem;
}

/* ----------------------------------------------------------------------
   0) Tab-strip header: transparent, no card chrome
   ---------------------------------------------------------------------- */
.pi-tab-card-header {
  background: transparent !important;
  background-color: transparent !important;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* ----------------------------------------------------------------------
   1) Component tokens (tweak these)
   ---------------------------------------------------------------------- */
:is(.ls-tabs, #pi-tabs) {
  /* 👇 THIS is the “push tabs right” knob */
  --ls-tabs-gutter-x: 32px;   /* try 24px / 32px / 40px */

  --ls-tabs-pad-top: 8px;
  --ls-tabs-gap: 18px;

  /* Hit-target (UX): keep clickable area comfortable */
  --ls-tab-hit-h: 44px;

  /* Typography + colors */
  --ls-tab-color: rgba(15, 23, 42, 0.55);       /* inactive */
  --ls-tab-color-hover: rgba(15, 23, 42, 0.80); /* hover */
  --ls-tab-color-active: rgba(15, 23, 42, 1);   /* active */

  /* Underline */
  --ls-underline-color: rgba(17, 24, 39, 1);
  --ls-underline-h: 2px;


  /* Focus ring */
  --ls-focus-ring: rgba(13, 110, 253, 0.22);
}

/* Responsive alignment: slightly tighter on small screens, wider on desktop */
@media (max-width: 576px) {
  :is(.ls-tabs, #pi-tabs) {
    --ls-tabs-gutter-x: 18px;
    --ls-tabs-gap: 14px;
  }
}
@media (min-width: 992px) {
  :is(.ls-tabs, #pi-tabs) {
    --ls-tabs-gutter-x: 40px;
  }
}

/* ----------------------------------------------------------------------
   2) Tablist element
   DBC sometimes puts your id/class on the <ul.nav…>
   and sometimes on a wrapper that CONTAINS the <ul.nav…>.
   These selectors style BOTH structures.
   ---------------------------------------------------------------------- */

/* When the tablist IS the component element itself */
:is(.ls-tabs, #pi-tabs):is(.nav, .nav-tabs, .nav-pills),
/* When the tablist is a descendant <ul.nav…> */
:is(.ls-tabs, #pi-tabs) :is(.nav, .nav-tabs, .nav-pills) {
  /* No background, no Bootstrap borders */
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;

  /* Layout */
  display: flex;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: var(--ls-tabs-gap);

  margin: 0 !important;

  /* Push tabs right & align with inner content */
  padding: var(--ls-tabs-pad-top) var(--ls-tabs-gutter-x) 0 var(--ls-tabs-gutter-x);


  /* Mobile overflow safety */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}

/* Hide scrollbar on WebKit */
:is(.ls-tabs, #pi-tabs):is(.nav, .nav-tabs, .nav-pills)::-webkit-scrollbar,
:is(.ls-tabs, #pi-tabs) :is(.nav, .nav-tabs, .nav-pills)::-webkit-scrollbar {
  display: none;
}

/* ----------------------------------------------------------------------
   3) Individual tabs (links)
   ---------------------------------------------------------------------- */
:is(.ls-tabs, #pi-tabs) .nav-link {
  /* Remove all Bootstrap “tab chrome” */
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  /* Make it feel modern */
  color: var(--ls-tab-color) !important;
  font-weight: 600;
  letter-spacing: 0.1px;
  text-decoration: none;

  /* Good hit target */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ls-tab-hit-h);

  /* IMPORTANT:
     Keep horizontal padding LOW so underline looks “text-tight”.
     Spacing between tabs is controlled by --ls-tabs-gap. */
  padding: 0 2px !important;
  margin: 0 !important;

  position: relative;
  white-space: nowrap;
  user-select: none;

  transition: color 140ms ease;
}

/* Hover (inactive) */
:is(.ls-tabs, #pi-tabs) .nav-link:not(.active):hover {
  color: var(--ls-tab-color-hover) !important;
}

/* Active */
:is(.ls-tabs, #pi-tabs) .nav-link.active,
:is(.ls-tabs, #pi-tabs) .nav-link[aria-selected="true"] {
  color: var(--ls-tab-color-active) !important;
  font-weight: 750;
}

/* Underline (animated) */
:is(.ls-tabs, #pi-tabs) .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;

  /* sit on the divider line */
  bottom: -1px;

  height: var(--ls-underline-h);
  background: var(--ls-underline-color);

  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 160ms ease;
}
:is(.ls-tabs, #pi-tabs) .nav-link.active::after,
:is(.ls-tabs, #pi-tabs) .nav-link[aria-selected="true"]::after {
  transform: scaleX(1);
}

/* Keyboard focus (premium but subtle) */
:is(.ls-tabs, #pi-tabs) .nav-link:focus-visible {
  outline: none;
  border-radius: 10px; /* only affects the focus ring shape */
  box-shadow: 0 0 0 0.25rem var(--ls-focus-ring) !important;
}

/* Disabled tab (dbc.Tab(disabled=True)) */
:is(.ls-tabs, #pi-tabs) .nav-link.disabled,
:is(.ls-tabs, #pi-tabs) .nav-link:disabled {
  opacity: 0.45;
  pointer-events: none;
}
/* =========================================================
   FIX: PI Tabs underline too low + weird grey hover "bar"
   Put this at the VERY END of your CSS file
   ========================================================= */

/* 1) Raise underline position */
:is(.ls-tabs, #pi-tabs) {
  /* tweak this one number until perfect */
  --ls-underline-offset: 6px;  /* try 4px–10px */
}

/* 2) Stop using a fixed height (that's what made the underline look "waaay too low") */
:is(.ls-tabs, #pi-tabs) .nav-link {
  height: auto !important;     /* overrides the earlier fixed height */
  min-height: 40px;            /* still a nice hit target */
  padding: 10px 2px 8px !important; /* top | left/right | bottom */
  background: transparent !important;
}

/* Apply the new underline offset */
:is(.ls-tabs, #pi-tabs) .nav-link::after {
  bottom: var(--ls-underline-offset) !important;
}

/* 3) Kill Bootstrap hover borders/underlines that show as light grey bars */
:is(.ls-tabs, #pi-tabs) .nav-link:hover,
:is(.ls-tabs, #pi-tabs) .nav-link:focus {
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* 4) Optional but recommended: make hover underline intentional + consistent
      (instead of Bootstrap’s random grey border) */
:is(.ls-tabs, #pi-tabs) .nav-link:not(.active):hover::after {
  transform: scaleX(1) !important;
  background: rgba(15, 23, 42, 0.22) !important; /* subtle grey */
}

/* Keep active underline solid even on hover */
:is(.ls-tabs, #pi-tabs) .nav-link.active:hover::after,
:is(.ls-tabs, #pi-tabs) .nav-link[aria-selected="true"]:hover::after {
  transform: scaleX(1) !important;

}
/* =========================================================
   PI Tabs — thicker underline, instant blue, softer active text
   Scope: ONLY the PI Tabs instance (#pi-tabs)
   ========================================================= */

/* PI tab styling is now controlled centrally via .ls-sh__tabs
   (see "Unified subheader tab styling" block below).
   All modules — including PI — use module_subheader() which applies
   the .ls-sh__tabs wrapper class. No per-module overrides needed.    */

/* ----------------------------------------------------------------------
   4) Optional: if you want ZERO divider line under the strip
   Uncomment this block.
   ---------------------------------------------------------------------- */
/*
:is(.ls-tabs, #pi-tabs):is(.nav, .nav-tabs, .nav-pills),
:is(.ls-tabs, #pi-tabs) :is(.nav, .nav-tabs, .nav-pills) {
  box-shadow: none !important;
}
*/

/* Make pinned-right feel like a calm “signals area” */
.ag-theme-alpine.custom-ag-grid .ag-pinned-right-cols-container,
.ag-theme-alpine.custom-ag-grid .ag-pinned-right-header {
  background: rgba(0, 0, 0, 0.012);
}
.ls-tabs .nav-link,
.ls-tabs .nav-tabs .nav-link,
.ls-tabs.nav-tabs .nav-link{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;

  margin: 0 !important;
  white-space: nowrap;
  user-select: none;

  color: var(--ls-text) !important;
  font-weight: 650;
  letter-spacing: .1px;

  padding: var(--ls-tab-pad-y) var(--ls-tab-pad-x);
  transition: background-color 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

/* hover */
.ls-tabs .nav-link:hover{
  color: var(--ls-text-strong) !important;
}

/* keyboard focus (accessible but clean) */
.ls-tabs .nav-link:focus-visible{
  box-shadow: 0 0 0 .25rem rgba(var(--ls-accent-rgb), .22) !important;
  border-radius: 10px;
}

/* ==========================================================
   Variant A: Segmented (SaaS / state-of-the-art)
   ========================================================== */

/* Segmented track — only outside .ls-sh__tabs (subheader neutralises it) */
.ls-tabs.ls-tabs--segmented .nav,
.ls-tabs--segmented.ls-tabs.nav{
  display: flex;
  gap: .25rem;

  padding-top: .35rem !important;
  padding-bottom: .35rem !important;

  background: var(--ls-track-bg);
  border: 1px solid var(--ls-track-border);
  border-radius: var(--ls-tab-radius);
}

.ls-tabs.ls-tabs--segmented .nav-link{
  border-radius: var(--ls-tab-radius) !important;
  position: relative;
}

/* Segmented underline — skip when inside .ls-sh__tabs (unified rules take over) */
.ls-tabs.ls-tabs--segmented .nav-link::after{
  content: "";
  position: absolute;
  left: 0.35rem;
  right: 0.35rem;
  bottom: 0.2rem;
  height: var(--ls-underline-h);
  border-radius: 999px;
  background: var(--ls-underline-color);
  opacity: 0;
  transform: scaleX(.6);
  transform-origin: center;
  transition: opacity 160ms ease, transform 160ms ease;
}

.ls-tabs.ls-tabs--segmented .nav-link.active::after,
.ls-tabs.ls-tabs--segmented .nav-link[aria-selected="true"]::after{
  opacity: 1;
  transform: scaleX(1);
}

/* ── Neutralise segmented track + underline inside the unified subheader ── */
.ls-sh__tabs .ls-tabs.ls-tabs--segmented .nav {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}
.ls-sh__tabs .ls-tabs.ls-tabs--segmented .nav-link {
  border-radius: 0 !important;
}
.ls-sh__tabs .ls-tabs.ls-tabs--segmented .nav-link::after {
  left: 0 !important;
  right: 0 !important;
  bottom: var(--ls-tab-underline-offset, 6px) !important;
  height: var(--ls-tab-underline-h, 3px) !important;
  background: transparent !important;
  opacity: 1 !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform 140ms ease !important;
}
.ls-sh__tabs .ls-tabs.ls-tabs--segmented .nav-link:hover::after {
  transform: scaleX(1) !important;
  background: var(--ls-tab-accent-weak) !important;
}
.ls-sh__tabs .ls-tabs.ls-tabs--segmented .nav-link.active::after,
.ls-sh__tabs .ls-tabs.ls-tabs--segmented .nav-link[aria-selected="true"]::after {
  transform: scaleX(1) !important;
  background: var(--ls-tab-accent) !important;
}
/* ===== Thin underline tabs (hex colors) ===== */

.pi-tabs.nav-tabs {
  border-bottom: 1px solid #D1D5DB; /* light grey baseline */
}

.pi-tabs.nav-tabs .nav-link {
  border: 0 !important;
  background: transparent !important;
  text-decoration: none !important;

  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;

  color: #6B7280;               /* inactive text */
  padding: 0.75rem 0;
  margin-right: 1.5rem;

  position: relative;
  transition: color 120ms ease;
}

/* darker hover (inactive only) */
.pi-tabs.nav-tabs .nav-link:not(.active):hover {
  color: #111827 !important;    /* hover text */
}

/* active text */
.pi-tabs.nav-tabs .nav-link.active {
  color: #111827 !important;    /* active text */
  font-weight: 600;
}

/* thin active indicator */
.pi-tabs.nav-tabs .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;                 /* thinner line */
  background: #0D6EFD;         /* underline color */
  border-radius: 1px;
}


/* =========================================================
   Generic Glass Modal  (.custom-modal)
   Matches the dark-glass offcanvas aesthetic.
   ========================================================= */
.custom-modal .modal-content {
  background: var(--surface-glass, rgba(16, 38, 79, 0.94));
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
  color: var(--text-strong);
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--border-glass);
  box-shadow: var(--elev-3, 0 18px 45px rgba(0, 0, 0, 0.5));
  overflow: hidden;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .custom-modal .modal-content { background: #0b1a36; }
}

.custom-modal .modal-header {
  border-bottom: 1px solid var(--divider-glass);
  padding: 0.75rem 1rem;
}
.custom-modal .modal-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-strong);
}
.custom-modal .btn-close {
  filter: invert(1) opacity(0.75);
}
.custom-modal .btn-close:hover { opacity: 1; }

.custom-modal .modal-body {
  padding: 1rem;
  color: var(--text-strong);
}
.custom-modal .modal-body p,
.custom-modal .modal-body label {
  color: var(--text-muted, rgba(255,255,255,.72));
}

.custom-modal .form-control {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-strong);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
}
.custom-modal .form-control::placeholder {
  color: var(--text-muted);
}
.custom-modal .form-control:focus {
  box-shadow: 0 0 0 .18rem rgba(72, 168, 255, 0.25);
  border-color: rgba(72, 168, 255, 0.65);
}

.custom-modal .modal-footer {
  border-top: 1px solid var(--divider-glass);
  background: transparent;
  padding: 0.75rem 1rem;
}
.custom-modal .btn-primary {
  background-color: var(--brand-accent, var(--secondary-color));
  border-color: var(--brand-accent, var(--secondary-color));
  font-weight: 600;
}
.custom-modal .btn-secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text-strong);
}
.custom-modal .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Full text cascade for modals */
.custom-modal .modal-content,
.custom-modal .modal-body span,
.custom-modal .modal-body small,
.custom-modal .modal-body li,
.custom-modal .form-check-label,
.custom-modal .form-label {
  color: var(--text-strong, rgba(255,255,255,.92));
}
.custom-modal .text-muted {
  color: var(--text-muted, rgba(255,255,255,.55)) !important;
}
.custom-modal .text-dark {
  color: var(--text-strong, rgba(255,255,255,.92)) !important;
}
.custom-modal .btn-outline-secondary {
  color: var(--text-strong, rgba(255,255,255,.85));
  border-color: rgba(255,255,255,0.25);
}
.custom-modal .btn-outline-secondary:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

/* dcc.Dropdown inside glass modals — legacy + modern classes */
.custom-modal .Select-control,
.custom-modal .Select__control {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: var(--text-strong, rgba(255,255,255,.88)) !important;
}
.custom-modal .Select-value-label,
.custom-modal .Select-placeholder,
.custom-modal .Select-input > input,
.custom-modal .Select__single-value,
.custom-modal .Select__placeholder,
.custom-modal .Select__input-container input {
  color: var(--text-strong, rgba(255,255,255,.88)) !important;
}
.custom-modal .Select-menu-outer,
.custom-modal .Select__menu {
  background: rgba(16, 38, 79, 0.97) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.custom-modal .Select-option,
.custom-modal .Select__option {
  color: var(--text-strong, rgba(255,255,255,.88)) !important;
  background: transparent !important;
}
.custom-modal .Select-option.is-focused,
.custom-modal .Select__option--is-focused {
  background: rgba(255,255,255,0.08) !important;
}
.custom-modal .Select-arrow-zone,
.custom-modal .Select__indicator {
  color: rgba(255,255,255,.5) !important;
}
.custom-modal .form-check-input {
  background-color: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
}
.custom-modal .form-check-input:checked {
  background-color: var(--brand-accent, var(--secondary-color));
  border-color: var(--brand-accent, var(--secondary-color));
}


/* ================================================================
   Unified Page Subheader — compact two-row dashboard header
   Row 1: page title (left) + period & status metadata (right)
   Row 2: tab navigation (left) + filter chips (right)
   ================================================================ */

/* Page root covers full viewport width (hides blue body background) */
.pi-page-root,
.ls-page-root {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Inner content capped at 1440px, centered */
.pi-page-root > div,
.ls-page-root > div {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 56px;
  padding-right: 56px;
}

/* ================================================================
   Subheader band — single calm surface, hairline divider below
   ================================================================ */
.pi-subheader,
.ls-subheader {
  background: #f5f5f5;                 /* same as page bg — one surface */
  padding: 6px 0 0;                    /* tight gap below navbar         */
  /* Keep right edge inset so metadata aligns with card content below  */
  padding-right: 4px;
}

/* ── 2×2 grid: shared column + row tracks ──
 *
 *   Col 1 (1fr)               Col 2 (auto)
 *   ────────────────────────   ─────────────────────────────
 *   Title                     scope chips
 *   Tabs                      period · updated metadata
 *   ─────────────── hairline divider ──────────────────────
 */
.pi-sh__grid,
.ls-sh__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 1.5rem;
  row-gap: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* (1,1) — page title */
.pi-sh__title,
.ls-sh__title {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  white-space: nowrap;
  line-height: 1;
}

/* (1,2) — scope chips, right-aligned in column, left-aligned internally */
.pi-sh__chips,
.ls-sh__chips {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* (2,1) — tabs */
.pi-sh__tabs,
.ls-sh__tabs {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
}

.pi-sh__tabs .nav,
.ls-sh__tabs .nav {
  width: auto !important;
  flex-wrap: nowrap;
}

/* ── Unified subheader tab styling (all modules) ──────────────────
   Uses the .ls-sh__tabs wrapper applied by module_subheader() so
   every module gets the same blue accent underline as PI.
   ───────────────────────────────────────────────────────────────── */
.ls-sh__tabs {
  --ls-tab-accent: #2563eb;
  --ls-tab-accent-weak: rgba(37, 99, 235, 0.30);
  --ls-tab-text: #6b7280;
  --ls-tab-text-hover: #475569;
  --ls-tab-text-active: #334155;
  --ls-tab-underline-h: 3px;
  --ls-tab-underline-offset: 0px;

  /* Override the segmented variant's dark underline with blue */
  --ls-underline-color: var(--ls-tab-accent);

  /* Zero out the tab-strip gutter so tabs align with card content */
  --ls-tabs-gutter-x: 0px;
}

.ls-sh__tabs .nav,
.ls-sh__tabs .nav-tabs {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.ls-sh__tabs .nav-link {
  position: relative;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ls-tab-text) !important;
  font-weight: 600;
  min-height: 40px;
  padding: 10px 2px 2px !important;
  margin: 0 18px 0 0;
  outline: none !important;
  white-space: nowrap;
}

.ls-sh__tabs .nav-link::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: var(--ls-tab-underline-offset) !important;
  height: var(--ls-tab-underline-h) !important;
  border-radius: 999px !important;
  background: transparent !important;
  opacity: 1 !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform 140ms ease !important;
}

.ls-sh__tabs .nav-link:hover {
  color: var(--ls-tab-text-hover) !important;
}
.ls-sh__tabs .nav-link:hover::after {
  transform: scaleX(1) !important;
  background: var(--ls-tab-accent-weak) !important;
}

.ls-sh__tabs .nav-link.active,
.ls-sh__tabs .nav-link[aria-selected="true"] {
  color: var(--ls-tab-text-active) !important;
  font-weight: 700;
}
.ls-sh__tabs .nav-link.active::after,
.ls-sh__tabs .nav-link[aria-selected="true"]::after {
  transform: scaleX(1) !important;
  background: var(--ls-tab-accent) !important;
}

.ls-sh__tabs .nav-link:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.22) !important;
}

.ls-sh__tabs .nav-tabs .nav-link,
.ls-sh__tabs .nav-tabs .nav-link:hover,
.ls-sh__tabs .nav-tabs .nav-link.active {
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* (2,2) — metadata, flush-right with card edge */
.pi-sh__meta,
.ls-sh__meta {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;               /* flush-right with card edge         */
  align-self: center;              /* vertically centre with tab text    */
  padding-top: 6px;                /* nudge slightly below tab midline   */
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 0.8125rem;
  color: #6b7280;
  white-space: nowrap;
  line-height: 1;
}

.pi-sh__period,
.pi-sh__status,
.ls-sh__period,
.ls-sh__status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.875rem;
  color: #4b5563;
}

.pi-sh__period .bi-calendar3,
.pi-sh__status .bi-clock-history,
.ls-sh__period .bi-calendar3,
.ls-sh__status .bi-clock-history {
  font-size: 1rem;
  color: #374151;
  cursor: pointer;
}

/* dot separator — only show when period has content */
.pi-sh__period:not(:empty) + .pi-sh__status::before,
.ls-sh__period:not(:empty) + .ls-sh__status::before {
  content: "\00B7";
  margin: 0 5px;
}

/* ── Shared popover base for period + status popovers ── */
.pi-period-popover,
.pi-status-popover {
  min-width: 260px;
}

.pi-period-popover .popover-body,
.pi-status-popover .popover-body {
  padding: 10px 14px;
  font-size: 0.8125rem;
  color: #6b7280;
}

/* ── Period popover (calendar icon hover) ── */
.pi-period-pop__title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9ca3af;
  margin-bottom: 6px;
}

.pi-period-pop__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 3px 0;
  font-size: 0.8125rem;
  color: #6b7280;
}

.pi-period-pop__row + .pi-period-pop__row {
  border-top: 1px solid #f3f4f6;
}

.pi-period-pop__label {
  flex-shrink: 0;
  font-weight: 400;
  color: #9ca3af;
}

.pi-period-pop__label--active {
  color: #374151;
  font-weight: 500;
}

.pi-period-pop__value {
  text-align: right;
}

.pi-period-pop__value--active {
  color: #111827;
  font-weight: 500;
}



/* ── Scope chips: calm secondary style inside the subheader ── */
.pi-subheader .clear-filters,
.ls-subheader .clear-filters {
  border-color: #d1d5db;               /* gray-300 — softer than blue       */
  color: #374151;                       /* gray-700 — readable, not "CTA"    */
  background: #f9fafb;                  /* gray-50  — subtle fill            */
  box-shadow: none;
  transform: none;
}

.pi-subheader .clear-filters:hover,
.ls-subheader .clear-filters:hover {
  border-color: #9ca3af;               /* gray-400                          */
  background: #f3f4f6;                 /* gray-100                          */
  box-shadow: none;
  transform: none;
}

.pi-subheader .clear-filters:active,
.ls-subheader .clear-filters:active {
  background: #e5e7eb;                 /* gray-200                          */
  box-shadow: none;
  transform: none;
}


/* ── Responsive ── */
@media (max-width: 991.98px) {
  .pi-sh__grid,
  .ls-sh__grid {
    grid-template-columns: 1fr;          /* stack to single column   */
  }
  .pi-sh__chips,
  .ls-sh__chips {
    grid-column: 1;
    justify-self: start;
  }
  .pi-sh__meta,
  .ls-sh__meta {
    grid-column: 1;
    justify-self: start;
  }
}

@media (max-width: 767.98px) {
  .pi-page-root > div,
  .ls-page-root > div {
    padding-left: 16px;
    padding-right: 16px;
  }
  .pi-sh__grid,
  .ls-sh__grid {
    row-gap: 6px;
    padding-top: 4px;
  }
  .pi-sh__chips,
  .ls-sh__chips {
    flex-wrap: wrap;
  }
}