/* =====================================================================
   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)
   ===================================================================== */

.pi-tab-card {
  /* 👇 This is the “outline” around the whole tabs card */
  border: 1px solid #cfd6e8 !important;
  border-radius: 0.75rem;
  background-color: #ffffff;
  box-shadow: none !important;
}

/* Card body: plain white so active tab can “merge” into it */
.pi-tab-card-body {
  background-color: #ffffff;
  border-radius: 0 0 0.75rem 0.75rem;
}

.pi-tab-bodies {
  margin-top: 0;
}

/* Header: provides the baseline border that tabs sit on */
.pi-tab-card-header.custom-card-header {
  display: flex;
  align-items: flex-end;  /* tabs hug the bottom edge */
  border-bottom: 1px solid var(--gray-200, #cfd6e8);
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
  padding: 0.35rem 0.75rem 0;   /* no bottom padding so tabs sit on border */

  /* 👇 darker rail behind the tabs */
  background-color: #e0e6f4;

  overflow: visible;            /* allow active tab + focus ring to pop out */
}

/* =====================================================================
   Price Intelligence – main section tabs
   Old-school raised tabs that “pop up” from the header
   ===================================================================== */

/* Tab strip: left-aligned, no extra underline from Bootstrap */
.pi-tab-card-header .pi-section-tabs.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  border-bottom: 0;          /* we use the header’s border instead */
  margin-bottom: 0;
  padding-left: 0;
}

/* Keep items snug; no big gaps so it feels like a tab rail */
.pi-tab-card-header .pi-section-tabs .nav-item {
  margin-right: 0.25rem;
}

/* Base tab: rectangular, only top corners rounded, sitting on the header border */
.pi-tab-card-header .pi-section-tabs .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
  border-radius: 0.5rem 0.5rem 0 0;    /* old-school tab shape */
  border: 1px solid transparent;
  background-color: transparent;
  color: #5f6472;                       /* slightly stronger text */
  margin-bottom: -1px;                 /* overlaps header bottom border */
  cursor: pointer;
  transition:
    background-color 120ms ease-out,
    border-color 120ms ease-out,
    color 120ms ease-out,
    box-shadow 120ms ease-out;
}

/* Inactive tabs: flat text on the rail */
.pi-tab-card-header .pi-section-tabs .nav-link:not(.active) {
  background-color: transparent;
  border-color: transparent;
  color: #6c757d;
}

/* Hover state for inactive tabs: very light lift */
.pi-tab-card-header .pi-section-tabs .nav-link:not(.active):hover {
  background-color: #e8ecf9;
  border-color: #c6cee6 #c6cee6 transparent;
  color: #343a40;
  text-decoration: none;
}

/* Active tab: subtle grey outline + white background */
.pi-tab-card-header .pi-section-tabs .nav-link.active,
.pi-tab-card-header .pi-section-tabs .nav-item.show .nav-link {
  background-color: #ffffff;
  color: var(--brand-accent);
  font-weight: 600;

  /* 👇 this is the “popped” tab outline (top + sides) */
  border-color: #c6cee6 #c6cee6 #ffffff !important;

  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.02); /* tiny top lip only */
}

/* Focus state: visible ring for keyboard users */
.pi-tab-card-header .pi-section-tabs .nav-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Kill any Bootstrap underline / pseudo-element */
.pi-tab-card-header .pi-section-tabs .nav-link::after,
.pi-tab-card-header .pi-section-tabs .nav-link::before,
.pi-tab-card-header .pi-section-tabs .nav-link.active::after {
  content: none !important;
}
/* The body of the tab card (behind all the inner cards) */
.pi-tab-card-body {
    background-color: #f5f7fb;  /* your swatch */
    padding: 0.75rem;
    border-radius: 0 0 0.75rem 0.75rem;
}

/* Keep the actual content cards white so they pop */
.pi-tab-card-body .card {
    background-color: #ffffff;
}
/* Background behind ALL tab contents */
.pi-tab-bodies {
    background-color: #f5f7fb;
    padding: 0.75rem;
    border-radius: 0 0 0.75rem 0.75rem;
}

/* Keep inner cards white */
.pi-tab-bodies .card {
    background-color: #ffffff;
}