/* ================================================================
   BIZMETRY DESIGN SYSTEM — create-biz-interceptor-dialog.css
   ================================================================ */

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

.create-biz-interceptor-dialog {
  --bm-navy-900:  #111827;
  --bm-navy-700:  #2D3A52;
  --bm-navy-500:  #4B5878;
  --bm-navy-300:  #8E97B4;
  --bm-navy-100:  #DDE2EF;

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

  /* SLAs tab active-subtab accent only (edit-biz-interceptor-dialog.css) —
     ported verbatim from agent-config-dialog.css's own teal scale, since the
     SLAs/Alerting tabs are a deliberate pixel-for-pixel port of Agent
     Configuration's SLA/Alerting UX and must keep its exact accent color. */
  --bm-teal-500: #00BFA5;
  --bm-teal-100: #CCFAF3;

  --bm-warning:        #D97706;
  --bm-warning-bg:     #FFFBEB;
  --bm-warning-border: #FCD34D;

  --bm-error:          #DC2626;
  --bm-error-bg:       #FEF2F2;
  /* SLAs/Alerting tabs only (edit-biz-interceptor-dialog.css) — a real
     "healthy/recovered" green, distinct from --bm-indigo above, since SLA
     RESET conditions and enabled-alerting states both want that
     universally-understood color rather than borrowing the brand hue. */
  --bm-success:        #16A34A;
  --bm-success-bg:     #F0FDF4;

  /* SLA breach-threshold semantic colors — same 4-way palette as
     agent-config-dialog.css's own --bm-sla-* tokens (RESET/SET/SET TIME/
     RESET TIME), reused verbatim for the interceptor SLAs tab's rzSlider,
     rich tooltips, and footer cards. */
  --bm-sla-clear:       #059669;
  --bm-sla-clear-bg:    #ECFDF5;
  --bm-sla-clear-faint: #6EE7B7;
  --bm-sla-set:         #DC2626;
  --bm-sla-set-bg:      #FEF2F2;
  --bm-sla-set-faint:   #FECACA;
  --bm-sla-set-time:    #D97706;
  --bm-sla-set-time-bg: #FFFBEB;
  --bm-sla-set-time-faint: #FCD34D;
  --bm-sla-reset:       #4338CA;
  --bm-sla-reset-bg:    #EEF2FF;
  --bm-sla-reset-faint: #C7D2FE;

  --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-strong: #C5CCDF;
  --bm-border-subtle: #EFF1F8;

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

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

  --bm-shadow-xs: 0 1px 2px rgba(8,12,24,.06);

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

  font-family: var(--bm-font-body) !important;
}

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

/* ── 2. Dialog Shell ──────────────────────────────────────── */

.create-biz-interceptor-dialog {
  /* Widened from 680px, then another 20% (820px -> 984px) — cramped for the
     transport-type cards, the radio option groups and (in Edit mode) the
     General/Environments tabs, all of which were fighting for space in a
     fairly narrow column. Shared by both the Create wizard and Edit dialog
     (edit-biz-interceptor-dialog.css reuses this same root class), so this
     widens both at once. */
  width: 984px !important;
  min-width: 984px !important;
  max-width: 95vw !important;
  /* ONE fixed height, shared by the Create wizard's 3 steps and the Edit
     dialog's 2 tabs — deliberately NOT content-driven. Two earlier attempts
     both regressed: auto-height-per-step made the dialog visibly jump size
     switching steps/tabs, and Edit specifically depends on a definite-height
     ancestor chain for its <md-tabs>'s height:100% to resolve at all — take
     that away and Edit's tab content collapsed to invisible rather than
     just "short". min(760px, 90vh), not a bare 760px — still one fixed
     value per viewport (so it never changes as the user steps/tabs through),
     but safely bounded on a short screen instead of the earlier bug where
     min-height silently beat max-height in the cascade and pushed the
     dialog's own toolbar off-screen. Content taller than that scrolls
     internally (.bi-dialog-content / .bi-tab-content's own overflow-y:auto)
     instead of resizing the dialog around it. */
  height: min(760px, 90vh) !important;
  max-height: 95vh !important;
  border-radius: var(--bm-r-xl) !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px rgba(8,12,24,.22) !important;
}

.create-biz-interceptor-dialog .biz-interceptor-form {
  display: flex !important;
  flex-direction: column !important;
  /* Percentage of the dialog's own fixed height above — needed so Edit's
     <md-tabs height:100%> (edit-biz-interceptor-dialog.css) has a definite
     ancestor to resolve against; without it those percentage heights
     collapse to nothing. */
  height: 100% !important;
  max-height: 95vh !important;
  overflow: hidden !important;
}

/* ── 3. Toolbar ───────────────────────────────────────────── */

body md-dialog.create-biz-interceptor-dialog md-toolbar.bi-dialog-toolbar {
  background: var(--bm-grad-brand) !important;
  box-shadow: 0 2px 12px rgba(91,108,249,.28) !important;
  min-height: 60px !important;
  max-height: 60px !important;
  flex-shrink: 0 !important;
}

body md-dialog.create-biz-interceptor-dialog .md-toolbar-tools {
  padding: 0 18px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  display: flex !important;
  align-items: center !important;
  /* Tight base gap — the icon needs to sit right next to the title, ~4px
     like the REST API badge's own icon-to-label spacing. A wider 12px
     gap is restored explicitly via margin-left on .bi-header-title/
     .bi-transport-badge--toolbar below, rather than raising this base
     value (a negative margin on the icon to counteract a wider gap here
     was tried first — it visibly desyncs from a fixed icon once
     $mdDialog's open transition finishes and the browser commits a fresh
     layout pass, a known gap+negative-margin flex quirk; explicit
     positive margins on the elements that actually need MORE space have
     no such issue). */
  gap: 4px !important;
}

body md-dialog.create-biz-interceptor-dialog .md-toolbar-tools > md-icon.dialog-icon {
  color: var(--bm-text-inverse) !important;
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

body md-dialog.create-biz-interceptor-dialog .md-toolbar-tools > .md-icon-button {
  color: var(--bm-text-inverse) !important;
  margin: 0 !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: var(--bm-r-md) !important;
}

body md-dialog.create-biz-interceptor-dialog .md-toolbar-tools > .md-icon-button md-icon {
  color: rgba(255,255,255,.75) !important;
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
}
body md-dialog.create-biz-interceptor-dialog .md-toolbar-tools > .md-icon-button:hover md-icon {
  color: var(--bm-text-inverse) !important;
}
body md-dialog.create-biz-interceptor-dialog .md-toolbar-tools > .md-icon-button:hover {
  background: rgba(255,255,255,.12) !important;
}

/* ── 4. Content ───────────────────────────────────────────── */

.create-biz-interceptor-dialog .bi-dialog-content {
  padding: 0 !important;
  background: var(--bm-surface-2) !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
}

.create-biz-interceptor-dialog .bi-step {
  padding: 24px 28px !important;
  box-sizing: border-box !important;
}

/* ── Header subtitle + step indicator ─────────────────────── */

body md-dialog.create-biz-interceptor-dialog .bi-header-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

body md-dialog.create-biz-interceptor-dialog .bi-header-info h2 {
  font-family: var(--bm-font-display) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--bm-text-inverse) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

body md-dialog.create-biz-interceptor-dialog .bi-header-subtitle {
  font-size: 11.5px !important;
  color: rgba(255,255,255,.8) !important;
}

.create-biz-interceptor-dialog .bi-steps-bar {
  flex-shrink: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 52px !important;
  background: var(--bm-surface) !important;
  border-bottom: 1px solid var(--bm-border) !important;
}

.create-biz-interceptor-dialog .bi-steps-bar > * {
  transform: scale(.78) !important;
  transform-origin: center center !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* ── Transport Type cards (Step 1) ────────────────────────── */

.create-biz-interceptor-dialog .bi-transport-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}

.create-biz-interceptor-dialog .bi-transport-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 16px 16px 14px !important;
  border: 2px solid var(--bm-border) !important;
  border-radius: var(--bm-r-md) !important;
  background: var(--bm-surface) !important;
  cursor: pointer !important;
  transition: var(--bm-t) !important;
  position: relative !important;
  min-height: 78px !important;
}

.create-biz-interceptor-dialog .bi-transport-card:not(.bi-transport-card--disabled):hover {
  border-color: var(--bm-indigo-500) !important;
  background: rgba(91,108,249,.05) !important;
}

.create-biz-interceptor-dialog .bi-transport-card--selected {
  border-color: var(--bm-indigo-600) !important;
  background: rgba(91,108,249,.06) !important;
  box-shadow: 0 3px 10px rgba(91,108,249,.14) !important;
}

.create-biz-interceptor-dialog .bi-transport-card--disabled {
  opacity: .5 !important;
  cursor: not-allowed !important;
  background: var(--bm-surface-2) !important;
}

.create-biz-interceptor-dialog .bi-transport-card__radio {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 2px solid var(--bm-border-strong) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: var(--bm-t) !important;
}

.create-biz-interceptor-dialog .bi-transport-card--selected .bi-transport-card__radio {
  border-color: var(--bm-indigo-600) !important;
}

.create-biz-interceptor-dialog .bi-transport-card__radio-inner {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: transparent !important;
  transition: var(--bm-t) !important;
}

.create-biz-interceptor-dialog .bi-transport-card--selected .bi-transport-card__radio-inner {
  background: var(--bm-indigo-600) !important;
}

.create-biz-interceptor-dialog .bi-transport-card__icon {
  font-size: 24px !important;
  width: 24px !important;
  height: 24px !important;
  color: var(--bm-text-muted) !important;
  flex-shrink: 0 !important;
  transition: var(--bm-t) !important;
}

.create-biz-interceptor-dialog .bi-transport-card--selected .bi-transport-card__icon,
.create-biz-interceptor-dialog .bi-transport-card:not(.bi-transport-card--disabled):hover .bi-transport-card__icon {
  color: var(--bm-indigo-600) !important;
}

.create-biz-interceptor-dialog .bi-transport-card__body {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.create-biz-interceptor-dialog .bi-transport-card__label {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--bm-text-primary) !important;
  line-height: 1.2 !important;
}

.create-biz-interceptor-dialog .bi-transport-card__desc {
  font-size: 12px !important;
  color: var(--bm-text-muted) !important;
  line-height: 1.4 !important;
}

.create-biz-interceptor-dialog .bi-transport-card__soon {
  position: absolute !important;
  top: 8px !important;
  right: 10px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  color: var(--bm-text-muted) !important;
  background: var(--bm-surface-2) !important;
  border: 1px solid var(--bm-border) !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
}

/* ── 5. Form Elements ─────────────────────────────────────── */

.create-biz-interceptor-dialog .form-group { margin-bottom: 16px !important; }

/* Material always injects a floated .md-errors-spacer (min-height 24px)
   right after every input/textarea to reserve room for ng-messages, even
   when none are shown — that, stacked with our own .bi-name-feedback row,
   is what was ballooning the gap below the Name field. */
.create-biz-interceptor-dialog md-input-container .md-errors-spacer {
  min-height: 0 !important;
}

.create-biz-interceptor-dialog .form-label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--bm-text-secondary) !important;
  margin-bottom: 9px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}

.create-biz-interceptor-dialog .required { color: var(--bm-error) !important; margin-left: 4px !important; }

/* ── Name field: regenerate button + duplicate-name feedback ─ */
.create-biz-interceptor-dialog .bi-field-label-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 9px !important;
}
.create-biz-interceptor-dialog .bi-field-label-row .form-label { margin-bottom: 0 !important; }

.create-biz-interceptor-dialog .bi-regenerate-btn {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--bm-r-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.create-biz-interceptor-dialog .bi-regenerate-btn md-icon {
  font-size: 17px !important;
  width: 17px !important;
  height: 17px !important;
  margin: 0 !important;
  color: var(--bm-indigo-500) !important;
}
.create-biz-interceptor-dialog .bi-regenerate-btn:hover { background: rgba(91,108,249,.10) !important; }

.create-biz-interceptor-dialog .form-input--error {
  border-color: var(--bm-error) !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.10) !important;
}

.create-biz-interceptor-dialog .bi-name-feedback {
  display: flex !important;
  align-items: center !important;
  margin-top: 2px !important;
}
.create-biz-interceptor-dialog .bi-name-error {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--bm-error) !important;
}
.create-biz-interceptor-dialog .bi-name-error md-icon {
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
  color: var(--bm-error) !important;
  margin: 0 !important;
}
.create-biz-interceptor-dialog .bi-name-checking {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  color: var(--bm-text-muted) !important;
  font-style: italic !important;
}
.create-biz-interceptor-dialog .bi-name-checking md-progress-circular { flex-shrink: 0 !important; }

.create-biz-interceptor-dialog .form-input,
.create-biz-interceptor-dialog .form-textarea,
.create-biz-interceptor-dialog .form-select {
  width: 100% !important;
  padding: 10px 14px !important;
  border: 1.5px solid var(--bm-border) !important;
  border-radius: var(--bm-r-md) !important;
  font-size: 13.5px !important;
  color: var(--bm-text-primary) !important;
  background: var(--bm-surface) !important;
  transition: border-color var(--bm-t), box-shadow var(--bm-t) !important;
  box-sizing: border-box !important;
}

.create-biz-interceptor-dialog .form-input:focus,
.create-biz-interceptor-dialog .form-textarea:focus {
  outline: none !important;
  border-color: var(--bm-indigo-500) !important;
  box-shadow: 0 0 0 3px rgba(91,108,249,.10) !important;
}

.create-biz-interceptor-dialog .form-input::placeholder,
.create-biz-interceptor-dialog .form-textarea::placeholder {
  color: var(--bm-text-muted) !important;
  font-style: italic !important;
}

.create-biz-interceptor-dialog .form-textarea {
  resize: vertical !important;
  min-height: 130px !important;
  line-height: 1.55 !important;
}

.create-biz-interceptor-dialog md-select .md-select-value {
  color: var(--bm-text-primary) !important;
  opacity: 1 !important;
}
.create-biz-interceptor-dialog md-select .md-select-value.md-select-placeholder {
  color: var(--bm-text-muted) !important;
  font-style: italic !important;
}

/* ── 6. Radio group (instrumentation type) ───────────────── */

.create-biz-interceptor-dialog .bi-radio-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Only the Instrumentation Type group (fixed 2 options) goes side by
   side — the SDK Type group reuses .bi-radio-group too but is
   ng-repeat'd and can hold more items, so it stays vertical. */
.create-biz-interceptor-dialog .bi-radio-group--horizontal {
  flex-direction: row !important;
}
.create-biz-interceptor-dialog .bi-radio-group--horizontal .bi-radio-option {
  flex: 1 1 0 !important;
}

/*
 * Two earlier approaches (line-height matching, then a CSS Grid +
 * `display:contents` layout) both measured correctly in an isolated test
 * page but showed an unexplained ~11px offset in the live app — grid row
 * auto-sizing across a `display:contents` boundary isn't behaving
 * predictably here, and it's not worth chasing further blind.
 *
 * This version sidesteps grid/flex auto-sizing entirely: the circle is
 * `position:absolute` at a FIXED pixel offset (top/left = the button's
 * own padding), and the label reverts to plain block flow with a
 * matching `padding-left`. Both the circle and the title then start at
 * the exact same, explicitly-known offset from the button's edge —
 * nothing is being centered or auto-computed, so there's no row/track
 * sizing step left that could disagree with what we measure.
 */
.create-biz-interceptor-dialog .bi-radio-option {
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  padding: 12px 14px 12px 44px !important;
  border: 1.5px solid var(--bm-border) !important;
  border-radius: var(--bm-r-md) !important;
  background: var(--bm-surface) !important;
  transition: var(--bm-t) !important;
}
.create-biz-interceptor-dialog .bi-radio-option:hover { border-color: var(--bm-navy-300) !important; }
.create-biz-interceptor-dialog .bi-radio-option.md-checked {
  border-color: var(--bm-indigo-500) !important;
  background: rgba(91,108,249,.05) !important;
}
.create-biz-interceptor-dialog .bi-radio-option .md-container {
  position: absolute !important;
  top: 50% !important;
  left: 14px !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  width: 20px !important;
  height: 20px !important;
}
.create-biz-interceptor-dialog .bi-radio-option .md-label {
  display: block !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: normal !important;
}
.create-biz-interceptor-dialog .bi-radio-title {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--bm-text-primary) !important;
}
.create-biz-interceptor-dialog .bi-radio-hint {
  display: block !important;
  margin-top: 3px !important;
  font-size: 12px !important;
  color: var(--bm-text-muted) !important;
  line-height: 1.4 !important;
}

/* ── Fine Tuning tab ──────────────────────────────────────── */

.create-biz-interceptor-dialog .bi-fine-tuning-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}
.create-biz-interceptor-dialog .bi-fine-tuning-desc {
  font-size: 12.5px !important;
  color: var(--bm-text-secondary) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
/* Intro paragraph at the top of each Tuning sub-tab panel (General /
   Self-Tuning) — the tab label itself now carries the grouping, this is
   just the one-line "what lives here" blurb. */
.create-biz-interceptor-dialog .bi-param-group-desc {
  font-size: 12.5px !important;
  color: var(--bm-text-muted) !important;
  line-height: 1.4 !important;
  margin: 0 0 16px !important;
}

/* ── Tuning sub-tabs (General / Self-Tuning / Proxy Settings) ───────────
   Nested inside the Environments step (create) / Tuning tab (edit) —
   .bi-subtabs already handles the md-dynamic-height-on-nested-tabs fix and
   the transparent tab-bar background (see that rule's own comment, shared
   with the SLAs Pressure/Agent Latency sub-tabs). This adds only the
   content-panel sizing, same shape as .monitoring-subtab-panel. */
.create-biz-interceptor-dialog .bi-tuning-subtab-panel {
  max-width: 640px !important;
  padding: 20px 0 8px !important;
}

/* Groups fields within a sub-tab panel (Self-Tuning's Batch Size / Worker
   Count / Auto-Scaling) — a lighter-weight divider than a whole tab, just a
   small label with a rule above every group (including the first, right
   below the intro paragraph — reads fine as a consistent section start). */
.create-biz-interceptor-dialog .bi-subsection-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--bm-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  margin: 0 0 12px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--bm-border) !important;
}

.create-biz-interceptor-dialog .bi-loading-inline {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px !important;
}
.create-biz-interceptor-dialog .bi-reset-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  height: 32px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  border-radius: var(--bm-r-md) !important;
  border: 1.5px solid var(--bm-border-strong) !important;
  background: var(--bm-surface) !important;
  color: var(--bm-text-secondary) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-transform: none !important;
}
.create-biz-interceptor-dialog .bi-reset-btn md-icon {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  color: var(--bm-text-secondary) !important;
}
.create-biz-interceptor-dialog .bi-reset-btn:hover {
  background: var(--bm-surface-2) !important;
  border-color: var(--bm-navy-300) !important;
}

/* ── Environments tab ─────────────────────────────────────── */

/* Master/detail: the list stays put (sticky) while only the detail pane's
   content scrolls with the tab — no more re-scrolling past every other
   environment's sliders just to reach the next one. */
.create-biz-interceptor-dialog .bi-env-layout {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
}

.create-biz-interceptor-dialog .bi-env-sidebar {
  flex: 0 0 168px !important;
  position: sticky !important;
  top: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.create-biz-interceptor-dialog .bi-env-list-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 10px !important;
  border: 1.5px solid var(--bm-border) !important;
  border-radius: var(--bm-r-md) !important;
  background: var(--bm-surface) !important;
  cursor: pointer !important;
  transition: var(--bm-t) !important;
}
.create-biz-interceptor-dialog .bi-env-list-item:hover { border-color: var(--bm-navy-300) !important; }
.create-biz-interceptor-dialog .bi-env-list-item--active {
  border-color: var(--bm-indigo-500) !important;
  background: rgba(91,108,249,.06) !important;
}

.create-biz-interceptor-dialog .bi-env-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--bm-text-primary) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.create-biz-interceptor-dialog .bi-env-switch { margin: 0 !important; flex-shrink: 0 !important; }

.create-biz-interceptor-dialog .bi-env-detail {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 4px 0 0 16px !important;
  border-left: 1px solid var(--bm-border) !important;
}

.create-biz-interceptor-dialog .bi-env-detail-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}
.create-biz-interceptor-dialog .bi-env-detail-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--bm-text-primary) !important;
}
.create-biz-interceptor-dialog .bi-env-detail-status {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  background: var(--bm-border) !important;
  color: var(--bm-text-secondary) !important;
}
.create-biz-interceptor-dialog .bi-env-detail-status--on {
  background: rgba(16,185,129,.14) !important;
  color: #0a8f5f !important;
}

/* Disabled environment — every control underneath is also ng-disabled;
   this just makes that state visually obvious and blocks stray clicks. */
.create-biz-interceptor-dialog .bi-env-detail-body--disabled {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

/* ── Proxy Settings sub-tab — enable switch + description row ── */
.create-biz-interceptor-dialog .bi-proxy-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 14px !important;
}
.create-biz-interceptor-dialog .bi-proxy-desc {
  font-size: 12.5px !important;
  color: var(--bm-text-muted) !important;
  line-height: 1.4 !important;
}
.create-biz-interceptor-dialog .bi-proxy-fields .form-group:last-child { margin-bottom: 0 !important; }

.create-biz-interceptor-dialog .field-group { margin-bottom: 20px !important; }

.create-biz-interceptor-dialog .field-header { margin-bottom: 6px !important; }

.create-biz-interceptor-dialog .field-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--bm-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}

.create-biz-interceptor-dialog .tooltip-container {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 8px !important;
}
.create-biz-interceptor-dialog .tooltip-container .info-icon {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  color: var(--bm-text-muted) !important;
  cursor: help !important;
}
.create-biz-interceptor-dialog .tooltip-container:hover .info-icon { color: var(--bm-indigo-500) !important; }
.create-biz-interceptor-dialog .tooltip-container .custom-tooltip {
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  z-index: 9999 !important;
  background: var(--bm-navy-900) !important;
  color: var(--bm-text-inverse) !important;
  padding: 10px 14px !important;
  border-radius: var(--bm-r-md) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  width: 240px !important;
  top: 50% !important;
  left: 110% !important;
  transform: translateY(-50%) !important;
  box-shadow: 0 10px 30px rgba(8,12,24,.25) !important;
  transition: opacity var(--bm-t) !important;
}
.create-biz-interceptor-dialog .tooltip-container:hover .custom-tooltip {
  visibility: visible !important;
  opacity: 1 !important;
}

.create-biz-interceptor-dialog .slider-wrapper {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 14px !important;
}
.create-biz-interceptor-dialog .custom-slider { flex: 1 !important; min-width: 160px !important; }
.create-biz-interceptor-dialog .custom-slider .md-track { height: 3px !important; background: var(--bm-border) !important; border-radius: 2px !important; }
.create-biz-interceptor-dialog .custom-slider .md-track-fill { background: var(--bm-indigo-500) !important; border-radius: 2px !important; }
.create-biz-interceptor-dialog .custom-slider .md-thumb {
  width: 18px !important;
  height: 18px !important;
  background: var(--bm-surface) !important;
  border: 2.5px solid var(--bm-indigo-500) !important;
}
.create-biz-interceptor-dialog .custom-slider .md-thumb::before,
.create-biz-interceptor-dialog .custom-slider .md-thumb::after {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.create-biz-interceptor-dialog .custom-slider .md-focus-thumb,
.create-biz-interceptor-dialog .custom-slider .md-disabled-thumb {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
.create-biz-interceptor-dialog .custom-slider .md-focus-ring { background: rgba(91,108,249,.14) !important; border: none !important; }
.create-biz-interceptor-dialog .custom-slider .md-sign,
.create-biz-interceptor-dialog .custom-slider .md-sign::after {
  display: none !important;
  opacity: 0 !important;
}
.create-biz-interceptor-dialog .custom-slider .md-thumb:hover,
.create-biz-interceptor-dialog .custom-slider.md-active .md-thumb {
  transform: scale(1.2) !important;
  box-shadow: 0 0 0 6px rgba(91,108,249,.18) !important;
}

.create-biz-interceptor-dialog .slider-input-wrapper { flex-shrink: 0 !important; width: 76px !important; }
.create-biz-interceptor-dialog .slider-input {
  width: 100% !important;
  font-size: 13px !important;
  padding: 7px 8px !important;
  border: 1.5px solid var(--bm-border) !important;
  border-radius: var(--bm-r-md) !important;
  box-sizing: border-box !important;
  text-align: center !important;
  background: var(--bm-surface) !important;
  color: var(--bm-text-primary) !important;
  transition: border-color var(--bm-t), box-shadow var(--bm-t) !important;
  outline: none !important;
}
.create-biz-interceptor-dialog .slider-input:focus {
  border-color: var(--bm-indigo-500) !important;
  box-shadow: 0 0 0 3px rgba(91,108,249,.12) !important;
}

/* ── 8. Loading / Warning ─────────────────────────────────── */

.create-biz-interceptor-dialog .resource-type-loading {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 0 !important;
  color: var(--bm-text-muted) !important;
}
.create-biz-interceptor-dialog .loading-text { font-size: 13px !important; font-style: italic !important; }

.create-biz-interceptor-dialog .warning-box {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  background: var(--bm-warning-bg) !important;
  border: 1px solid var(--bm-warning-border) !important;
  border-left: 4px solid var(--bm-warning) !important;
  padding: 12px 14px !important;
  border-radius: var(--bm-r-sm) !important;
  margin-top: 8px !important;
}
.create-biz-interceptor-dialog .warning-icon {
  color: var(--bm-warning) !important; font-size: 18px !important; width: 18px !important; height: 18px !important; margin: 0 !important; flex-shrink: 0 !important;
}
.create-biz-interceptor-dialog .warning-title { font-size: 13px !important; font-weight: 700 !important; color: var(--bm-text-primary) !important; }
.create-biz-interceptor-dialog .warning-text  { font-size: 12px !important; color: var(--bm-text-secondary) !important; margin-top: 2px !important; }

/* ── 9. Footer Actions ────────────────────────────────────── */

.create-biz-interceptor-dialog .dialog-actions {
  background: var(--bm-surface) !important;
  border-top: 1px solid var(--bm-border) !important;
  padding: 14px 24px !important;
  box-shadow: 0 -2px 8px rgba(8,12,24,.06) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

.create-biz-interceptor-dialog .btn-cancel,
.create-biz-interceptor-dialog .btn-back,
.create-biz-interceptor-dialog .btn-create {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 22px !important;
  height: 40px !important;
  border-radius: var(--bm-r-md) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  transition: var(--bm-t) !important;
  margin: 0 !important;
}

.create-biz-interceptor-dialog .btn-cancel {
  background: var(--bm-surface) !important;
  color: var(--bm-text-secondary) !important;
  border: 1.5px solid var(--bm-border-strong) !important;
}
.create-biz-interceptor-dialog .btn-cancel:hover { background: var(--bm-surface-2) !important; border-color: var(--bm-navy-300) !important; }

.create-biz-interceptor-dialog .btn-back {
  background: var(--bm-surface) !important;
  color: var(--bm-indigo-600) !important;
  border: 1.5px solid var(--bm-indigo-500) !important;
}
.create-biz-interceptor-dialog .btn-back:hover { background: rgba(91,108,249,.06) !important; }
.create-biz-interceptor-dialog .btn-back md-icon { margin: 0 -4px 0 -6px !important; }

.create-biz-interceptor-dialog .btn-create {
  background: var(--bm-grad-brand) !important;
  color: var(--bm-text-inverse) !important;
  border: none !important;
  box-shadow: 0 3px 10px rgba(91,108,249,.22) !important;
}
.create-biz-interceptor-dialog .btn-create:not([disabled]):hover {
  box-shadow: 0 5px 16px rgba(91,108,249,.36) !important;
  transform: translateY(-1px) !important;
}
.create-biz-interceptor-dialog .btn-create[disabled] {
  opacity: 1 !important;
  background: var(--bm-border-strong) !important;
  color: var(--bm-text-secondary) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* Shared Discovery checklist for create and edit dialogs. */
.create-biz-interceptor-dialog .bi-discovery-settings md-switch {
  margin: 0 0 8px !important;
}
.create-biz-interceptor-dialog .bi-discovery-settings .bi-discovery-help {
  margin: 0 0 12px !important;
  color: var(--bm-text-secondary) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
.create-biz-interceptor-dialog .bi-discovery-settings .bi-discovery-label {
  margin: 0 0 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--bm-text-secondary) !important;
}
.create-biz-interceptor-dialog .bi-discovery-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 4px 16px;
}
.create-biz-interceptor-dialog .bi-discovery-methods md-checkbox {
  display: block !important;
  position: relative;
  margin: 0 !important;
  padding: 6px 0 !important;
  min-height: 32px;
  box-sizing: border-box;
  font-size: 13px !important;
  line-height: 20px !important;
}
.create-biz-interceptor-dialog .bi-discovery-methods md-checkbox .md-container {
  left: 0 !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}
.create-biz-interceptor-dialog .bi-discovery-methods md-checkbox .md-label {
  margin: 0 0 0 28px !important;
  line-height: 20px !important;
  white-space: nowrap;
}
.create-biz-interceptor-dialog .bi-discovery-settings .bi-discovery-note {
  margin: 10px 0 0 !important;
  font-size: 12px !important;
}