/* ================================================================
   BIZMETRY DESIGN SYSTEM — interceptor-panel.css
   Prefix: ipd-
   Same design-token block and structural shape as agent-panel.css
   (.apd-*), so the two account-wide panels read as one experience.
   ================================================================
   Tokens → Dialog → Toolbar → Controls → Table → Cells
   → Environment Dots → Pressure Bar → Action Buttons → States
   → Responsive
   ================================================================ */

/* ── 1. Design Tokens ─────────────────────────────────────── */

.ipd-dialog {

  --bm-navy-900:  #111827;
  --bm-navy-800:  #1E2A3A;
  --bm-navy-700:  #2D3A52;
  --bm-navy-500:  #4B5878;
  --bm-navy-300:  #8E97B4;
  --bm-navy-200:  #BFC5D8;
  --bm-navy-100:  #DDE2EF;
  --bm-navy-50:   #F4F5FA;

  --bm-indigo-600: #4756e8;
  --bm-indigo-500: #5b6cf9;
  --bm-indigo-200: #a5b4fc;
  --bm-indigo-50:  #eef0ff;
  --bm-violet-600: #764ba2;
  --bm-grad-brand: linear-gradient(135deg, #5b6cf9 0%, #764ba2 100%);

  --bm-teal-600:  #009977;
  --bm-teal-500:  #00BFA5;
  --bm-teal-100:  #CCFAF3;
  --bm-teal-50:   #E6FAF7;

  --bm-success:        #059669;
  --bm-success-bg:     #ECFDF5;
  --bm-success-border: #6EE7B7;
  --bm-success-text:   #065F46;

  --bm-warning:        #D97706;
  --bm-warning-bg:     #FFFBEB;
  --bm-warning-border: #FCD34D;
  --bm-warning-text:   #92400E;

  --bm-error:          #DC2626;
  --bm-error-bg:       #FEF2F2;
  --bm-error-border:   #FECACA;
  --bm-error-text:     #991B1B;

  --bm-info:           #2563EB;
  --bm-info-bg:        #EFF6FF;
  --bm-info-border:    #BFDBFE;

  --bm-surface:    #FFFFFF;
  --bm-surface-2:  #F7F8FC;
  --bm-surface-3:  #EFF1F8;

  --bm-text-primary:   #111827;
  --bm-text-secondary: #4B5878;
  --bm-text-muted:     #8E97B4;
  --bm-text-inverse:   #FFFFFF;

  --bm-border:        #E2E5EF;
  --bm-border-subtle: #EFF1F8;
  --bm-border-strong: #C5CCDF;

  --bm-r-sm:   4px;
  --bm-r-md:   6px;
  --bm-r-lg:   10px;
  --bm-r-xl:   14px;
  --bm-r-pill: 100px;

  --bm-font-display: 'Outfit', system-ui, sans-serif;
  --bm-font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --bm-font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --bm-shadow-xs: 0 1px 2px rgba(8,12,24,.06);
  --bm-shadow-sm: 0 1px 4px rgba(8,12,24,.08), 0 1px 2px rgba(8,12,24,.04);
  --bm-shadow-md: 0 4px 12px rgba(8,12,24,.10), 0 2px 4px rgba(8,12,24,.06);

  --bm-t: 160ms cubic-bezier(.4,0,.2,1);

  /* ── Action button colors ─────────────────────────────── */
  --ipd-act-stats:    #00BFA5;   /* teal           */
  --ipd-act-metrics:  #5b6cf9;   /* brand indigo   */
  --ipd-act-download: #764ba2;   /* brand violet   */
  --ipd-act-edit:     #2563EB;   /* info blue      */
  --ipd-act-delete:   #DC2626;   /* error red      */

  width: 98vw !important;
  max-width: 1900px !important;
  height: 92vh !important;
  max-height: 92vh !important;
  border-radius: var(--bm-r-xl) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 24px 64px rgba(8,12,24,.22) !important;
  font-family: var(--bm-font-body) !important;
}

.ipd-dialog md-icon,
.ipd-dialog .material-icons {
  font-family: 'Material Icons' !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-feature-settings: 'liga' !important;
  -webkit-font-feature-settings: 'liga' !important;
}


/* ── 2. Toolbar ───────────────────────────────────────────── */

.ipd-toolbar {
  background: var(--bm-grad-brand) !important;
  box-shadow: 0 2px 12px rgba(91,108,249,.28) !important;
  min-height: 68px !important;
  flex-shrink: 0 !important;
}

.ipd-toolbar-tools {
  padding: 0 20px !important;
  min-height: 68px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.ipd-toolbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.ipd-toolbar-icon-wrap {
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--bm-r-lg) !important;
  background: rgba(255,255,255,.16) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.ipd-toolbar-icon-wrap md-icon {
  font-size: 22px !important;
  width: 22px !important;
  height: 22px !important;
  color: var(--bm-text-inverse) !important;
}

.ipd-toolbar-title {
  font-family: var(--bm-font-display) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--bm-text-inverse) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.1px !important;
  text-align: left !important;
}

.ipd-toolbar-subtitle {
  font-family: var(--bm-font-body) !important;
  font-size: 11.5px !important;
  color: rgba(255,255,255,.60) !important;
  margin: 2px 0 0 !important;
  text-align: left !important;
}

.ipd-stats-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  border-radius: var(--bm-r-pill) !important;
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  background: rgba(255,255,255,.14) !important;
  color: var(--bm-text-inverse) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}

.ipd-stats-badge md-icon {
  font-size: 15px !important;
  width: 15px !important;
  height: 15px !important;
  color: inherit !important;
}

.ipd-refreshing-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  padding: 5px 14px !important;
  border-radius: var(--bm-r-pill) !important;
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--bm-text-inverse) !important;
}

.ipd-refreshing-spinner circle { stroke: var(--bm-text-inverse) !important; }

.ipd-close-btn {
  color: rgba(255,255,255,.75) !important;
  border-radius: var(--bm-r-md) !important;
  transition: var(--bm-t) !important;
}

.ipd-close-btn:hover { background: rgba(255,255,255,.12) !important; }
.ipd-close-btn md-icon { color: inherit !important; }


/* ── 3. Content Area ──────────────────────────────────────── */

.ipd-content {
  background: var(--bm-surface-2) !important;
  padding: 0 !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}


/* ── 4. Controls Bar ──────────────────────────────────────── */

.ipd-controls-wrap {
  padding: 16px 20px 0 !important;
  flex-shrink: 0 !important;
}

.ipd-controls-card {
  background: var(--bm-surface) !important;
  border-radius: var(--bm-r-lg) !important;
  border: 1px solid var(--bm-border) !important;
  box-shadow: var(--bm-shadow-xs) !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}

.ipd-controls-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 14px 16px !important;
}

.ipd-ctrl-sep {
  width: 1px !important;
  height: 32px !important;
  background: var(--bm-border) !important;
  flex-shrink: 0 !important;
}

.ipd-ctrl-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.ipd-ctrl-label {
  font-family: var(--bm-font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--bm-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
}


/* ── 5. Selects ───────────────────────────────────────────── */

.ipd-select-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.ipd-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  height: 34px !important;
  padding: 0 30px 0 10px !important;
  font-family: var(--bm-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--bm-text-primary) !important;
  background: var(--bm-surface-2) !important;
  border: 1px solid var(--bm-border) !important;
  border-radius: var(--bm-r-md) !important;
  cursor: pointer !important;
  outline: none !important;
  transition: var(--bm-t) !important;
  min-width: 140px !important;
}

.ipd-select-sm { min-width: 76px !important; }
.ipd-select-wide { min-width: 178px !important; }

.ipd-live-toggle {
  display: flex !important;
  align-items: center !important;
  height: 34px !important;
}

.ipd-live-switch          { margin: 0 !important; }
.ipd-live-switch .md-label { display: none !important; }

.ipd-select:hover {
  background: var(--bm-surface-3) !important;
  border-color: var(--bm-border-strong) !important;
}

.ipd-select:focus {
  background: var(--bm-surface) !important;
  border-color: var(--bm-indigo-500) !important;
  box-shadow: 0 0 0 3px rgba(91,108,249,.10) !important;
}

.ipd-select-caret {
  position: absolute !important;
  right: 6px !important;
  pointer-events: none !important;
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  color: var(--bm-text-muted) !important;
}


/* ── 6. Search ────────────────────────────────────────────── */

.ipd-search-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: flex-end !important;
  min-width: 220px !important;
  max-width: 340px !important;
  flex: 1 !important;
}

.ipd-search-icon {
  position: absolute !important;
  left: 10px !important;
  font-size: 17px !important;
  width: 17px !important;
  height: 17px !important;
  color: var(--bm-text-muted) !important;
  pointer-events: none !important;
}

.ipd-search-input {
  width: 100% !important;
  height: 34px !important;
  padding: 0 32px 0 34px !important;
  font-family: var(--bm-font-body) !important;
  font-size: 13px !important;
  color: var(--bm-text-primary) !important;
  background: var(--bm-surface-2) !important;
  border: 1px solid var(--bm-border) !important;
  border-radius: var(--bm-r-md) !important;
  outline: none !important;
  transition: var(--bm-t) !important;
}

.ipd-search-input::placeholder { color: var(--bm-text-muted) !important; }

.ipd-search-input:focus {
  background: var(--bm-surface) !important;
  border-color: var(--bm-indigo-500) !important;
  box-shadow: 0 0 0 3px rgba(91,108,249,.10) !important;
}

.ipd-search-clear {
  position: absolute !important;
  right: 6px !important;
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  padding: 0 !important;
  transition: var(--bm-t) !important;
}

.ipd-search-clear:hover { background: rgba(8,12,24,.08) !important; }

.ipd-search-clear md-icon {
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
  color: var(--bm-text-muted) !important;
}


/* ── 7. Buttons ───────────────────────────────────────────── */

.ipd-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 16px !important;
  height: 34px !important;
  border-radius: var(--bm-r-md) !important;
  font-family: var(--bm-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: var(--bm-t) !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.ipd-btn md-icon {
  font-size: 17px !important;
  width: 17px !important;
  height: 17px !important;
  margin: 0 !important;
  color: inherit !important;
}

.ipd-btn--ghost {
  background: var(--bm-surface) !important;
  color: var(--bm-text-secondary) !important;
  border: 1px solid var(--bm-border) !important;
  align-self: flex-end !important;
}

.ipd-btn--ghost:hover:not([disabled]) {
  background: var(--bm-surface-2) !important;
  border-color: var(--bm-border-strong) !important;
}


/* ── 8. Pagination ────────────────────────────────────────── */

.ipd-pagination-group {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  align-self: flex-end !important;
  height: 34px !important;
}

.ipd-pagination-btn {
  min-width: 30px !important;
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--bm-r-md) !important;
}

.ipd-pagination-btn md-icon {
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  color: var(--bm-text-secondary) !important;
}

.ipd-page-indicator {
  font-family: var(--bm-font-body) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--bm-text-secondary) !important;
  white-space: nowrap !important;
  padding: 0 4px !important;
}


/* ── 9. Summary Chips ─────────────────────────────────────── */

.ipd-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 12px !important;
  border-radius: var(--bm-r-pill) !important;
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: 1px solid transparent !important;
}

.ipd-chip md-icon {
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
  color: currentColor !important;
}

.ipd-chip--blue {
  background: var(--bm-indigo-50) !important;
  color: var(--bm-indigo-600) !important;
  border-color: var(--bm-indigo-200) !important;
}


/* ── 10. Section Header ───────────────────────────────────── */

.ipd-section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  padding: 11px 16px !important;
  background: var(--bm-surface-3) !important;
  border-bottom: 1px solid var(--bm-border) !important;
  position: relative !important;
}

.ipd-section-header::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: var(--bm-grad-brand) !important;
}

.ipd-section-header md-icon {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  color: var(--bm-indigo-500) !important;
  flex-shrink: 0 !important;
}

.ipd-section-header > span {
  font-family: var(--bm-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--bm-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  flex: 1 !important;
}

.ipd-section-count {
  font-family: var(--bm-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: var(--bm-indigo-50) !important;
  color: var(--bm-indigo-500) !important;
  padding: 2px 10px !important;
  border-radius: var(--bm-r-pill) !important;
  flex: 0 0 auto !important;
}


/* ── 11. Card / Table Wrap ────────────────────────────────── */

.ipd-card {
  background: var(--bm-surface) !important;
  border-radius: var(--bm-r-lg) !important;
  border: 1px solid var(--bm-border) !important;
  box-shadow: var(--bm-shadow-sm) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
}

.ipd-table-wrap {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  padding: 0 20px 20px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.ipd-table-scroll {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
}

.ipd-table-scroll::-webkit-scrollbar       { width: 6px; height: 6px; }
.ipd-table-scroll::-webkit-scrollbar-track { background: var(--bm-surface-2); border-radius: var(--bm-r-pill); }
.ipd-table-scroll::-webkit-scrollbar-thumb { background: var(--bm-border-strong); border-radius: var(--bm-r-pill); }
.ipd-table-scroll::-webkit-scrollbar-thumb:hover { background: var(--bm-navy-300); }


/* ── 12. Table ────────────────────────────────────────────── */

.ipd-table {
  width: 100% !important;
  min-width: 1320px !important;
  /* Fixed layout + the <colgroup> in interceptors-panel.html is what
     actually guarantees every header lines up with its column's cells —
     under the default auto layout, a wide flex cell (like the interceptor
     name, or the actions row) can silently grow its own column past what
     its header needs, throwing off left-alignment everywhere to its
     right. Same "deterministic column width" convention as the
     biz-interceptors-tab's own CSS-grid rows. */
  table-layout: fixed !important;
  border-collapse: collapse !important;
  font-family: var(--bm-font-body) !important;
}

.ipd-th {
  padding: 12px 14px !important;
  text-align: left !important;
  font-family: var(--bm-font-body) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: var(--bm-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  border-bottom: 2px solid var(--bm-border) !important;
  white-space: nowrap !important;
  background: var(--bm-surface-3) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
}

.ipd-th--center  { text-align: center !important; }

.ipd-td {
  padding: 10px 14px !important;
  vertical-align: middle !important;
  text-align: left !important;
  border-bottom: 1px solid var(--bm-border-subtle) !important;
  font-family: var(--bm-font-body) !important;
}

.ipd-td--center  { text-align: center !important; }
.ipd-td--actions { padding: 6px 10px !important; }

.ipd-row { transition: background var(--bm-t) !important; }
.ipd-row:hover { background: var(--bm-indigo-50) !important; }
.ipd-row:hover .ipd-td { border-bottom-color: var(--bm-indigo-200) !important; }
.ipd-row:last-child .ipd-td { border-bottom: none !important; }

/* Row-click opens Consolidated Stats (see ng-click on <tr> in the template)
   — every interactive control inside a row (the Enabled switch, env dots,
   action buttons) already stops its own click from bubbling up to the row,
   so this only ever fires from clicking blank cell space. */
.ipd-row--clickable { cursor: pointer !important; }


/* ── 13. Cell Types ───────────────────────────────────────── */

.ipd-name-cell {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.ipd-name-icon {
  font-size: 15px !important;
  width: 15px !important;
  height: 15px !important;
  color: var(--bm-text-muted) !important;
  flex-shrink: 0 !important;
}

.ipd-name-text {
  font-family: var(--bm-font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--bm-text-primary) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  letter-spacing: -0.1px !important;
}

.ipd-cell-text {
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  color: var(--bm-text-secondary) !important;
}

.ipd-cell-truncate {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.ipd-row-switch               { margin: 0 !important; }
.ipd-row-switch .md-label     { display: none !important; }
.ipd-row-switch .md-container { margin: 0 auto !important; }


/* ── 14. Instrumentation Badge ────────────────────────────── */

.ipd-instr-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  font-family: var(--bm-font-body) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  padding: 2px 7px 2px 6px !important;
  border-radius: var(--bm-r-pill) !important;
  border: 1px solid transparent !important;
}

.ipd-instr-badge--automatic { background: rgba(5,150,105,.10) !important; color: var(--bm-success-text) !important; border-color: rgba(5,150,105,.35) !important; }
.ipd-instr-badge--manual    { background: rgba(37,99,235,.10) !important;  color: var(--bm-info) !important;         border-color: rgba(37,99,235,.35) !important; }

.ipd-instr-badge__label {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-transform: none !important;
  letter-spacing: 0.2px !important;
}

.ipd-trigger-icon {
  font-size: 11px !important;
  width: 11px !important;
  height: 11px !important;
  min-width: 11px !important;
  line-height: 11px !important;
  color: inherit !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}


/* ── 15. Environment Dots + Pressure Bar ──────────────────── */

.ipd-env-cell {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  flex-wrap: wrap !important;
  max-width: 100% !important;
}

/* Per-environment initial-letter header — only rendered once a single
   Profile is selected (see selectedProfileEnvironments in the controller
   and the ng-if in interceptors-panel.html). Same shape as the per-profile
   Biz Interceptors tab's own .bi-env-initial, reproduced here with this
   panel's own design tokens instead of that file's hardcoded color. */
.ipd-env-header-initials {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  flex-wrap: wrap !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.ipd-env-initial {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  background: var(--bm-indigo-500) !important;
  color: var(--bm-text-inverse) !important;
  font-family: var(--bm-font-body) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.ipd-env-not-assigned {
  font-family: var(--bm-font-body) !important;
  font-size: 11px !important;
  font-style: italic !important;
  color: var(--bm-text-muted) !important;
  white-space: nowrap !important;
}

.ipd-env-dot {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
  cursor: default !important;
  border-radius: 50% !important;
  transition: var(--bm-t) !important;
}

.ipd-env-dot--clickable { cursor: pointer !important; }
.ipd-env-dot--clickable:hover {
  background: rgba(91,108,249,.12) !important;
  box-shadow: 0 0 0 3px rgba(91,108,249,.12) !important;
}

.ipd-env-dot-inner {
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

.ipd-env-dot--on .ipd-env-dot-inner {
  background: var(--bm-success-border) !important;
  animation: ipdEnvLivePulse 2s ease-in-out infinite !important;
}

.ipd-env-dot--warn .ipd-env-dot-inner {
  background: var(--bm-warning-border) !important;
  animation: ipdEnvWarnPulse 2s ease-in-out infinite !important;
}

.ipd-env-dot--off .ipd-env-dot-inner {
  background: var(--bm-error-border) !important;
}

.ipd-env-dot--agent-unreachable .ipd-env-dot-inner {
  background: var(--bm-navy-500) !important;
  animation: ipdEnvUnreachablePulse 2s ease-in-out infinite !important;
}

@keyframes ipdEnvLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(5,150,105,.45); }
  50%      { box-shadow: 0 0 0 6px rgba(5,150,105,0); }
}

@keyframes ipdEnvWarnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,119,6,.45); }
  50%      { box-shadow: 0 0 0 6px rgba(217,119,6,0); }
}

@keyframes ipdEnvUnreachablePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(75,85,99,.45); }
  50%      { box-shadow: 0 0 0 6px rgba(75,85,99,0); }
}

.ipd-env-dot--alert .ipd-env-dot-inner {
  box-shadow: none !important;
  animation: ipdEnvAlertBlink .9s ease-in-out infinite !important;
}

@keyframes ipdEnvAlertBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

.ipd-pressure-inline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-left: 6px !important;
  flex-shrink: 0 !important;
}

.ipd-pressure-bar-track {
  display: inline-block !important;
  width: 40px !important;
  height: 5px !important;
  background: var(--bm-surface-3) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}

.ipd-pressure-bar-fill {
  display: block !important;
  height: 100% !important;
  border-radius: 3px !important;
  min-width: 2px !important;
  transition: width .4s ease, background .4s ease !important;
  background: linear-gradient(90deg, #2196f3 0%, #1976d2 100%) !important;
}

.ipd-pressure-value {
  font-family: var(--bm-font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--bm-text-muted) !important;
  white-space: nowrap !important;
}


/* ── 15b. Traffic Cell (Captured / Dropped + Avg Pressure bar) ───── */

.ipd-traffic-cell {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
}

.ipd-traffic-counts {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.ipd-traffic-stat {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: var(--bm-font-mono) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* md-icon's Material Icons ligature glyph doesn't sit on the same visual
   baseline as adjacent text — flex-centering the icon itself (rather than
   just align-items:center on the row) is what actually keeps it level with
   the number next to it, same fix already used by .ipd-trigger-icon. */
.ipd-traffic-stat md-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  line-height: 13px !important;
  flex-shrink: 0 !important;
  color: inherit !important;
}

.ipd-traffic-stat--captured { color: var(--bm-success) !important; }
.ipd-traffic-stat--dropped  { color: var(--bm-error)   !important; }
.ipd-traffic-stat--ping     { color: var(--bm-info)    !important; }

/* Reuses .ipd-pressure-inline/.ipd-pressure-bar-track/.ipd-pressure-bar-fill
   from the section above (same visual language as the old inline badge that
   used to live in the Environments cell) — just without the left margin
   that used to space it away from the env dots sitting before it, and a
   longer bar now that the column has the room for it. */
.ipd-traffic-cell .ipd-pressure-inline { margin-left: 0 !important; }
.ipd-traffic-cell .ipd-pressure-bar-track { width: 100px !important; }

/* Same ligature-centering fix as .ipd-traffic-stat md-icon above — a
   leading icon that just labels "this is the pressure reading", same
   'compress' glyph already used for the Pressure SLA badge in the
   environment-status-dialog. */
.ipd-pressure-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  line-height: 13px !important;
  flex-shrink: 0 !important;
  color: var(--bm-text-muted) !important;
}


/* ── 15c. Owner / Changed Cell (stacked) ──────────────────────────── */

.ipd-owner-changed-cell {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
}


/* ── 16. Action Buttons ───────────────────────────────────── */

.ipd-actions-cell {
  display: flex !important;
  align-items: center !important;
  gap: 1px !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
}

.ipd-action-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  border-radius: var(--bm-r-md) !important;
  transition: var(--bm-t) !important;
}

.ipd-action-btn md-icon {
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  transition: color var(--bm-t), transform var(--bm-t) !important;
}

.ipd-action-btn--stats    md-icon { color: var(--ipd-act-stats)    !important; }
.ipd-action-btn--metrics  md-icon { color: var(--ipd-act-metrics)  !important; }
.ipd-action-btn--download md-icon { color: var(--ipd-act-download) !important; }
.ipd-action-btn--edit     md-icon { color: var(--ipd-act-edit)     !important; }
.ipd-action-btn--delete   md-icon { color: var(--ipd-act-delete)   !important; }

.ipd-action-btn--stats:not([disabled]):hover    { background: rgba(0,191,165,.10)  !important; }
.ipd-action-btn--metrics:not([disabled]):hover  { background: rgba(91,108,249,.10) !important; }
.ipd-action-btn--download:not([disabled]):hover { background: rgba(118,75,162,.10) !important; }
.ipd-action-btn--edit:not([disabled]):hover     { background: rgba(37,99,235,.10)  !important; }
.ipd-action-btn--delete:not([disabled]):hover   { background: rgba(220,38,38,.10)  !important; }

.ipd-action-btn:not([disabled]):hover md-icon { transform: scale(1.15) !important; }

.ipd-action-btn--confirm md-icon {
  color: var(--bm-error) !important;
  animation: ipdConfirmPulse 1s ease-in-out infinite !important;
}

@keyframes ipdConfirmPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}

.ipd-action-btn[disabled] {
  opacity: 1 !important;
  cursor: not-allowed !important;
  background: transparent !important;
}
.ipd-action-btn[disabled] md-icon {
  color: var(--bm-navy-100) !important;
  opacity: 1 !important;
}
.ipd-action-btn[disabled]:hover md-icon { transform: none !important; }


/* ── 17. Loading / Empty States ───────────────────────────── */

.ipd-loading {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  padding: 80px 40px !important;
  font-family: var(--bm-font-body) !important;
  color: var(--bm-text-muted) !important;
  font-size: 13.5px !important;
  font-style: italic !important;
  flex: 1 !important;
}

.ipd-loading md-progress-circular circle { stroke: var(--bm-indigo-500) !important; }

.ipd-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 80px 40px !important;
  text-align: center !important;
  flex: 1 !important;
}

.ipd-empty-icon {
  width: 110px !important;
  height: 110px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--bm-indigo-50), #f5f3ff) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 28px !important;
}

.ipd-empty-icon md-icon {
  font-size: 56px !important;
  width: 56px !important;
  height: 56px !important;
  color: var(--bm-indigo-500) !important;
}

.ipd-empty-title {
  font-family: var(--bm-font-display) !important;
  font-size: 21px !important;
  font-weight: 600 !important;
  color: var(--bm-text-primary) !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.1px !important;
}

.ipd-empty-desc {
  font-family: var(--bm-font-body) !important;
  font-size: 14px !important;
  color: var(--bm-text-secondary) !important;
  line-height: 1.6 !important;
  max-width: 480px !important;
  margin: 0 !important;
}


/* ── 18. Responsive ───────────────────────────────────────── */

@media (max-width: 1200px) {
  .ipd-ctrl-sep { display: none !important; }
}

@media (max-width: 768px) {
  .ipd-dialog {
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }

  .ipd-controls-row { flex-direction: column !important; align-items: stretch !important; }
  .ipd-search-wrap { max-width: 100% !important; }
  .ipd-th, .ipd-td { padding: 8px 10px !important; font-size: 11px !important; }

  .ipd-action-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  .ipd-action-btn md-icon {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
  }
}