/* ================================================================
   BIZMETRY DESIGN SYSTEM — datasource-list.css
   Requires: datasource-common.css
   ================================================================
   Tokens → Dialog → Toolbar → Controls Bar → Metric Chips
   → List Wrapper → Column Defs → List Header → Rows → Cells
   → Action Icons → Blocked Tooltip → Footer → Empty State
   → Reference Status Chips → Connection Result → Animations
   ================================================================ */

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

.datasources-dialog {

  /* ── Navy ──────────────────────────────────────────────── */
  --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;

  /* ── Brand ─────────────────────────────────────────────── */
  --bm-teal-600: #0d9488;
  --bm-teal-500: #14b8a6;
  --bm-teal-200: #99f6e4;
  --bm-teal-50:  #f0fdfa;
  --bm-navy-600: #1E2A3A;
  --bm-grad-brand: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  /* ── Semantic ──────────────────────────────────────────── */
  --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-info-text:      #1E40AF;

  /* ── Surfaces ──────────────────────────────────────────── */
  --bm-surface:    #FFFFFF;
  --bm-surface-2:  #F7F8FC;
  --bm-surface-3:  #EFF1F8;

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

  /* ── Borders ───────────────────────────────────────────── */
  --bm-border:        #E2E5EF;
  --bm-border-subtle: #EFF1F8;
  --bm-border-strong: #C5CCDF;

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

  /* ── Typography ────────────────────────────────────────── */
  --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;

  /* ── Shadows ───────────────────────────────────────────── */
  --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);

  /* ── Controls height ───────────────────────────────────── */
  --ds-h-ctrl: 38px;

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

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


/* Protect Material Icons */
.datasources-dialog md-icon,
.datasources-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. Dialog Shell ──────────────────────────────────────── */

.datasources-dialog {
  width: 1400px !important;
  max-width: 98vw !important;
  height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: var(--bm-r-xl) !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px rgba(8,12,24,.22) !important;
}




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

:where(.datasources-dialog) .datasources-toolbar {
  background: #1a1f2e !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.28) !important;
  min-height: 72px !important;
  flex-shrink: 0 !important;
}

:where(.datasources-dialog) .datasources-toolbar .md-toolbar-tools {
  padding: 0 24px !important;
  min-height: 72px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

:where(.datasources-dialog) .datasources-icon {
  color: var(--bm-text-inverse) !important;
  font-size: 28px !important;
  width: 28px !important;
  height: 28px !important;
  flex-shrink: 0 !important;
}

:where(.datasources-dialog) .datasources-header-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

:where(.datasources-dialog) .datasources-header-info h2 {
  font-family: var(--bm-font-display) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  color: var(--bm-text-inverse) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.1px !important;
}

:where(.datasources-dialog) .datasources-subtitle {
  font-family: var(--bm-font-body) !important;
  font-size: 12.5px !important;
  color: rgba(255,255,255,.65) !important;
  font-weight: 400 !important;
}

:where(.datasources-dialog) .datasources-toolbar .md-toolbar-tools > span[flex] { flex: 1 !important; min-width: 20px !important; }

:where(.datasources-dialog) .datasources-toolbar .md-icon-button {
  margin-left: 16px !important;
  color: rgba(255,255,255,.75) !important;
  border-radius: var(--bm-r-md) !important;
  transition: var(--bm-t) !important;
}

:where(.datasources-dialog) .datasources-toolbar .md-icon-button:hover {
  background: rgba(255,255,255,.12) !important;
}




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

:where(.datasources-dialog) .ds-controls-bar {
  background: var(--bm-surface) !important;
  border-radius: var(--bm-r-lg) var(--bm-r-lg) 0 0 !important;
  border-bottom: 1px solid var(--bm-border) !important;
  box-shadow: var(--bm-shadow-sm) !important;
  padding: 14px 20px 12px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}

:where(.datasources-dialog) .ds-controls-left {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  gap: 10px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

:where(.datasources-dialog) .ds-controls-right {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}




/* ── 5. Input Containers ──────────────────────────────────── */

:where(.datasources-dialog) .ds-search-container,
:where(.datasources-dialog) .ds-type-container,
:where(.datasources-dialog) .ds-status-container,
:where(.datasources-dialog) .ds-sort-container {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: bottom !important;
}

:where(.datasources-dialog) .ds-search-container { width: 220px !important; }
:where(.datasources-dialog) .ds-type-container { width: 160px !important; }
:where(.datasources-dialog) .ds-status-container { width: 140px !important; }
:where(.datasources-dialog) .ds-sort-container { width: 170px !important; }

.ds-search-container .md-errors-spacer,
.ds-type-container .md-errors-spacer,
.ds-status-container .md-errors-spacer,
.ds-sort-container .md-errors-spacer {
  display: none !important;
  min-height: 0 !important;
}

:where(.datasources-dialog) .ds-search-container > label,
:where(.datasources-dialog) .ds-type-container > label,
:where(.datasources-dialog) .ds-status-container > label,
:where(.datasources-dialog) .ds-sort-container > label {
  display: block !important;
  position: static !important;
  transform: none !important;
  font-family: var(--bm-font-body) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: var(--bm-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 5px !important;
  transition: none !important;
  pointer-events: none !important;
  opacity: 1 !important;
}


/* Search input */
:where(.datasources-dialog) .ds-search-input {
  display: block !important;
  width: 100% !important;
  height: var(--ds-h-ctrl) !important;
  padding: 0 12px !important;
  font-family: var(--bm-font-body) !important;
  font-size: 13.5px !important;
  color: var(--bm-text-primary) !important;
  border: 1.5px solid var(--bm-border) !important;
  border-radius: var(--bm-r-md) !important;
  background: var(--bm-surface) !important;
  box-sizing: border-box !important;
  transition: var(--bm-t) !important;
  margin: 0 !important;
  outline: none !important;
}

:where(.datasources-dialog) .ds-search-input:focus {
  border-color: var(--bm-teal-500) !important;
  box-shadow: 0 0 0 3px rgba(102,126,234,.10) !important;
}

:where(.datasources-dialog) .ds-search-input::placeholder { color: var(--bm-text-muted) !important; font-style: italic !important; }


/* Selects */
:where(.datasources-dialog) .ds-controls-bar md-input-container md-select {
  display: block !important;
  width: 100% !important;
  min-height: var(--ds-h-ctrl) !important;
  height: var(--ds-h-ctrl) !important;
  padding: 0 12px !important;
  border: 1.5px solid var(--bm-border) !important;
  border-radius: var(--bm-r-md) !important;
  background: var(--bm-surface) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  transition: var(--bm-t) !important;
}

:where(.datasources-dialog) .ds-controls-bar md-input-container md-select:focus {
  border-color: var(--bm-teal-500) !important;
  box-shadow: 0 0 0 3px rgba(102,126,234,.10) !important;
}

.ds-controls-bar md-input-container md-select .md-select-value {
  height: var(--ds-h-ctrl) !important;
  min-height: var(--ds-h-ctrl) !important;
  padding: 0 !important;
  border: none !important;
  font-family: var(--bm-font-body) !important;
  font-size: 13.5px !important;
  color: var(--bm-text-primary) !important;
  display: flex !important;
  align-items: center !important;
}

.ds-controls-bar md-input-container md-select .md-select-value span {
  color: var(--bm-text-primary) !important;
  opacity: 1 !important;
  font-size: 13.5px !important;
}

.ds-controls-bar md-input-container md-select .md-select-value .md-select-placeholder {
  color: var(--bm-text-muted) !important;
  font-style: italic !important;
}

.ds-controls-bar md-input-container md-select .md-select-icon {
  color: var(--bm-text-muted) !important;
  margin-top: 0 !important;
}




/* ── 6. Metric Chips ──────────────────────────────────────── */

:where(.datasources-dialog) .ds-metrics {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

:where(.datasources-dialog) .ds-metric-chip {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  gap: 5px !important;
  padding: 0 12px !important;
  height: var(--ds-h-ctrl) !important;
  border-radius: var(--bm-r-pill) !important;
  font-family: var(--bm-font-body) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  border: 1px solid transparent !important;
}

:where(.datasources-dialog) .ds-metric-chip md-icon {
  font-size: 15px !important;
  width: 15px !important;
  height: 15px !important;
  line-height: 15px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

:where(.datasources-dialog) .ds-metric-chip--online {
  background: var(--bm-success-bg) !important;
  color: var(--bm-success-text) !important;
  border-color: var(--bm-success-border) !important;
}

:where(.datasources-dialog) .ds-metric-chip--offline {
  background: var(--bm-error-bg) !important;
  color: var(--bm-error-text) !important;
  border-color: var(--bm-error-border) !important;
}

:where(.datasources-dialog) .ds-metric-chip--inuse {
  background: var(--bm-warning-bg) !important;
  color: var(--bm-warning-text) !important;
  border-color: var(--bm-warning-border) !important;
}




/* ── 7. New Datasource Button ─────────────────────────────── */

:where(.datasources-dialog) .ds-new-btn {
  background: #1a1f2e !important;
  color: var(--bm-text-inverse) !important;
  border-radius: var(--bm-r-md) !important;
  padding: 0 18px !important;
  height: var(--ds-h-ctrl) !important;
  min-height: var(--ds-h-ctrl) !important;
  font-family: var(--bm-font-body) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: none !important;
  box-shadow: 0 3px 10px rgba(102,126,234,.22) !important;
  transition: var(--bm-t) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

:where(.datasources-dialog) .ds-new-btn:not([disabled]):hover {
  box-shadow: 0 5px 16px rgba(102,126,234,.36) !important;
  transform: translateY(-1px) !important;
}

:where(.datasources-dialog) .ds-new-btn[disabled] { opacity: 0.45 !important; background: var(--bm-border) !important; box-shadow: none !important; cursor: not-allowed !important; }
:where(.datasources-dialog) .ds-new-btn md-icon { margin: 0 !important; font-size: 18px !important; width: 18px !important; height: 18px !important; color: var(--bm-text-inverse) !important; }




/* ── 8. List Wrapper ──────────────────────────────────────── */

:where(.datasources-dialog) .ds-list-wrapper {
  background: var(--bm-surface) !important;
  border-radius: 0 0 var(--bm-r-xl) var(--bm-r-xl) !important;
  box-shadow: var(--bm-shadow-sm) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}




/* ── 9. Column Definitions ────────────────────────────────── */

:where(.datasources-dialog) .ds-col-name { flex: 1 1 22%;   min-width: 180px !important; }
:where(.datasources-dialog) .ds-col-status { flex: 0 0 110px; min-width: 110px !important; }
:where(.datasources-dialog) .ds-col-agent { flex: 0 0 18%;   min-width: 140px !important; }
:where(.datasources-dialog) .ds-col-env { flex: 0 0 10%;   min-width: 90px  !important; }
:where(.datasources-dialog) .ds-col-type { flex: 0 0 9%;    min-width: 80px  !important; }
:where(.datasources-dialog) .ds-col-host { flex: 0 0 16%;   min-width: 130px !important; }
:where(.datasources-dialog) .ds-col-actions { flex: 0 0 140px; min-width: 140px !important; }




/* ── 10. List Header ──────────────────────────────────────── */

:where(.datasources-dialog) .ds-list-header {
  display: flex !important;
  align-items: center !important;
  padding: 0 20px 0 24px !important;
  height: 40px !important;
  background: var(--bm-surface-3) !important;
  border-bottom: 2px solid var(--bm-border) !important;
  flex-shrink: 0 !important;
}

:where(.datasources-dialog) .ds-list-header > div {
  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;
  padding-right: 12px !important;
}

:where(.datasources-dialog) .ds-list-header > .ds-col-actions { padding-right: 0 !important; }




/* ── 11. Datasource Rows ──────────────────────────────────── */

:where(.datasources-dialog) .ds-list { display: flex !important; flex-direction: column !important; }

:where(.datasources-dialog) .ds-row {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  padding: 0 20px 0 24px !important;
  min-height: 68px !important;
  border-bottom: 1px solid var(--bm-border-subtle) !important;
  background: var(--bm-surface) !important;
  transition: background var(--bm-t), box-shadow var(--bm-t) !important;
  animation: bm-ds-row-fade-in .25s ease both !important;
  gap: 0 !important;
  font-family: var(--bm-font-body) !important;
}

:where(.datasources-dialog) .ds-row:last-child { border-bottom: none !important; }

:where(.datasources-dialog) .ds-row:hover {
  background: var(--bm-teal-50) !important;
  box-shadow: inset 0 0 0 1px var(--bm-teal-200) !important;
  z-index: 1 !important;
}


/* Staggered entrance */
:where(.datasources-dialog) .ds-row:nth-child(1) { animation-delay: .02s; }
:where(.datasources-dialog) .ds-row:nth-child(2) { animation-delay: .04s; }
:where(.datasources-dialog) .ds-row:nth-child(3) { animation-delay: .06s; }
:where(.datasources-dialog) .ds-row:nth-child(4) { animation-delay: .08s; }
:where(.datasources-dialog) .ds-row:nth-child(5) { animation-delay: .10s; }
:where(.datasources-dialog) .ds-row:nth-child(6) { animation-delay: .12s; }
:where(.datasources-dialog) .ds-row:nth-child(7) { animation-delay: .14s; }
:where(.datasources-dialog) .ds-row:nth-child(8) { animation-delay: .16s; }
:where(.datasources-dialog) .ds-row:nth-child(9) { animation-delay: .18s; }
:where(.datasources-dialog) .ds-row:nth-child(10) { animation-delay: .20s; }


/* Status stripe */
:where(.datasources-dialog) .ds-row__stripe {
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 4px !important;
  background: var(--bm-border-strong) !important;
  transition: background var(--bm-t) !important;
}

:where(.datasources-dialog) .ds-row--online .ds-row__stripe { background: linear-gradient(180deg, var(--bm-success), #34d399) !important; }
:where(.datasources-dialog) .ds-row--offline .ds-row__stripe { background: linear-gradient(180deg, var(--bm-error), #f87171) !important; }
:where(.datasources-dialog) .ds-row--inuse .ds-row__stripe { background: linear-gradient(180deg, var(--bm-warning), #fbbf24) !important; }





/* ── 12. Row Cells ────────────────────────────────────────── */

/* Name / Identity */
:where(.datasources-dialog) .ds-row__identity {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding-right: 20px !important;
  min-width: 0 !important;
}

:where(.datasources-dialog) .ds-row__name-line {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

:where(.datasources-dialog) .ds-row__name {
  font-family: var(--bm-font-body) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--bm-text-primary) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 240px !important;
}

:where(.datasources-dialog) .ds-row__desc {
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  color: var(--bm-text-muted) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  line-height: 1.3 !important;
}


/* Status */
:where(.datasources-dialog) .ds-row__status { padding-right: 20px !important; flex-shrink: 0 !important; }


/* Agent */
:where(.datasources-dialog) .ds-list .ds-row .ds-col-agent {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

:where(.datasources-dialog) .ds-row__agent {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding-right: 12px !important;
  width: 100% !important;
}

:where(.datasources-dialog) .ds-row__agent md-icon {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  color: var(--bm-text-muted) !important;
  flex-shrink: 0 !important;
  align-self: center !important;
  margin: 0 !important;
}

:where(.datasources-dialog) .ds-row__agent-name {
  font-family: var(--bm-font-body) !important;
  font-size: 13px !important;
  color: var(--bm-text-secondary) !important;
  font-weight: 500 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}


/* Environment */
:where(.datasources-dialog) .ds-row__env { padding-right: 12px !important; }


/* DB Type */
:where(.datasources-dialog) .ds-list .ds-row .ds-col-type {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

:where(.datasources-dialog) .ds-row__type {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  padding-right: 12px !important;
  width: 100% !important;
}

:where(.datasources-dialog) .ds-row__type md-icon {
  font-size: 15px !important;
  width: 15px !important;
  height: 15px !important;
  color: var(--bm-warning) !important;
  flex-shrink: 0 !important;
  align-self: center !important;
  margin: 0 !important;
}

:where(.datasources-dialog) .ds-row__type-label {
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  color: var(--bm-text-secondary) !important;
  font-weight: 600 !important;
}


/* Host / Port */
:where(.datasources-dialog) .ds-row__host {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding-right: 12px !important;
  min-width: 0 !important;
}

:where(.datasources-dialog) .ds-row__host-value {
  font-family: var(--bm-font-mono) !important;
  font-size: 12px !important;
  color: var(--bm-text-secondary) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

:where(.datasources-dialog) .ds-row__port-value {
  font-family: var(--bm-font-mono) !important;
  font-size: 11px !important;
  color: var(--bm-text-muted) !important;
}


/* Actions */
:where(.datasources-dialog) .ds-row__actions { display: flex !important; align-items: center !important; gap: 2px !important; }




/* ── 13. In-Use Badge ─────────────────────────────────────── */

:where(.datasources-dialog) .ds-in-use-badge {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  gap: 3px !important;
  background: transparent !important;
  color: var(--bm-warning-text) !important;
  border: 1px solid var(--bm-warning-border) !important;
  padding: 1px 7px !important;
  border-radius: var(--bm-r-sm) !important;
  font-family: var(--bm-font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
}

:where(.datasources-dialog) .ds-in-use-badge md-icon {
  font-size: 11px !important;
  width: 11px !important;
  height: 11px !important;
  line-height: 11px !important;
  color: var(--bm-warning-text) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}




/* ── 14. Action Icons ─────────────────────────────────────── */

:where(.datasources-dialog) .ds-action-icon {
  color: var(--bm-text-muted) !important;
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  border-radius: var(--bm-r-md) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 18px !important;
  transition: var(--bm-t) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}


/* Default hover */
:where(.datasources-dialog) .ds-action-icon:hover {
  color: var(--bm-teal-500) !important;
  background: var(--bm-teal-50) !important;
  border-color: var(--bm-teal-200) !important;
  transform: translateY(-1px) !important;
}


/* Per-action hover tints */
:where(.datasources-dialog) .ds-action-icon--explore:hover {
  color: var(--bm-teal-500) !important;
  background: var(--bm-teal-50) !important;
  border-color: var(--bm-teal-200) !important;
}

:where(.datasources-dialog) .ds-action-icon--info:hover {
  color: var(--bm-navy-800) !important;
  background: var(--bm-teal-50) !important;
  border-color: var(--bm-teal-200) !important;
}

:where(.datasources-dialog) .ds-action-icon--edit:hover {
  color: var(--bm-info) !important;
  background: var(--bm-info-bg) !important;
  border-color: var(--bm-info-border) !important;
}

:where(.datasources-dialog) .ds-action-icon--delete:hover {
  color: var(--bm-error) !important;
  background: var(--bm-error-bg) !important;
  border-color: var(--bm-error-border) !important;
}


/* Pending delete — pulsing red */
:where(.datasources-dialog) .ds-action-icon--danger {
  color: var(--bm-error) !important;
  background: var(--bm-error-bg) !important;
  border-color: var(--bm-error-border) !important;
  animation: bm-ds-pulse-delete 1s ease-in-out infinite !important;
}

:where(.datasources-dialog) .ds-action-icon--danger:hover {
  background: var(--bm-error) !important;
  color: var(--bm-text-inverse) !important;
}


/* Blocked */
:where(.datasources-dialog) .ds-action-icon--blocked { opacity: 0.28 !important; cursor: default !important; pointer-events: none !important; }




/* ── 15. Blocked Tooltip Wrapper ──────────────────────────── */

:where(.datasources-dialog) .ds-blocked-wrapper {
  position: relative !important;
  display: inline-flex !important;
  cursor: not-allowed !important;
}

:where(.datasources-dialog) .ds-blocked-wrapper::before {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  bottom: calc(100% + 10px) !important;
  right: 0 !important;
  background: var(--bm-navy-900) !important;
  color: var(--bm-text-inverse) !important;
  padding: 8px 12px !important;
  border-radius: var(--bm-r-md) !important;
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  white-space: normal !important;
  width: 220px !important;
  text-align: center !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity .18s ease !important;
  z-index: 9999 !important;
  box-shadow: 0 3px 10px rgba(8,12,24,.25) !important;
}

:where(.datasources-dialog) .ds-blocked-wrapper::after {
  content: '' !important;
  position: absolute !important;
  bottom: calc(100% + 2px) !important;
  right: 12px !important;
  border: 6px solid transparent !important;
  border-top-color: var(--bm-navy-900) !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity .18s ease !important;
  z-index: 9999 !important;
}

:where(.datasources-dialog) .ds-blocked-wrapper:hover::before,
:where(.datasources-dialog) .ds-blocked-wrapper:hover::after { opacity: 1 !important; }

:where(.datasources-dialog) .ds-blocked-wrapper .ds-action-icon { pointer-events: none !important; }

:where(.datasources-dialog) .ds-blocked-capture {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  cursor: not-allowed !important;
  pointer-events: auto !important;
}




/* ── 16. List Footer ──────────────────────────────────────── */

:where(.datasources-dialog) .ds-list-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 10px 20px !important;
  border-top: 1px solid var(--bm-border-subtle) !important;
  background: var(--bm-surface-2) !important;
}

:where(.datasources-dialog) .ds-list-count {
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  color: var(--bm-text-muted) !important;
}

:where(.datasources-dialog) .ds-list-count strong { color: var(--bm-text-secondary) !important; font-weight: 600 !important; }




/* ── 17. Empty State ──────────────────────────────────────── */

:where(.datasources-dialog) .ds-empty-wrapper {
  min-height: 50vh !important;
  padding: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--bm-surface) !important;
  border-radius: 0 0 var(--bm-r-xl) var(--bm-r-xl) !important;
}

:where(.datasources-dialog) .ds-empty-card {
  background: var(--bm-surface-2) !important;
  border: 2px dashed var(--bm-border-strong) !important;
  border-radius: var(--bm-r-xl) !important;
  padding: 48px 36px !important;
  max-width: 520px !important;
  text-align: center !important;
  transition: var(--bm-t) !important;
}

:where(.datasources-dialog) .ds-empty-card:hover {
  box-shadow: var(--bm-shadow-md) !important;
  transform: translateY(-2px) !important;
}

:where(.datasources-dialog) .ds-empty-icon {
  font-size: 60px !important;
  width: 60px !important;
  height: 60px !important;
  color: var(--bm-navy-200) !important;
  margin: 0 auto 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  animation: bm-ds-pulse-icon 2s ease-in-out infinite !important;
}

:where(.datasources-dialog) .ds-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;
}

:where(.datasources-dialog) .ds-empty-text {
  font-family: var(--bm-font-body) !important;
  font-size: 14px !important;
  color: var(--bm-text-secondary) !important;
  line-height: 1.65 !important;
  margin: 0 0 24px !important;
}

.ds-empty-card .md-button {
  background: #1a1f2e !important;
  color: var(--bm-text-inverse) !important;
  border-radius: var(--bm-r-md) !important;
  padding: 0 22px !important;
  height: var(--ds-h-ctrl) !important;
  min-height: var(--ds-h-ctrl) !important;
  font-family: var(--bm-font-body) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  text-transform: none !important;
  box-shadow: 0 3px 10px rgba(102,126,234,.22) !important;
  transition: var(--bm-t) !important;
  margin: 0 auto !important;
}

.ds-empty-card .md-button:hover {
  box-shadow: 0 5px 16px rgba(102,126,234,.36) !important;
  transform: translateY(-1px) !important;
}




/* ── 18. Reference Status Chips ───────────────────────────── */

.ref-status-published { background: var(--bm-success-bg) !important; color: var(--bm-success-text) !important; border: 1px solid var(--bm-success-border) !important; }
.ref-status-reviewed { background: var(--bm-info-bg)    !important; color: var(--bm-info-text)    !important; border: 1px solid var(--bm-info-border)    !important; }
.ref-status-draft { background: var(--bm-surface-3)  !important; color: var(--bm-text-secondary)!important; border: 1px solid var(--bm-border)        !important; }
.ref-status-pending { background: var(--bm-warning-bg) !important; color: var(--bm-warning-text) !important; border: 1px solid var(--bm-warning-border) !important; }
.ref-status-deprecated { background: var(--bm-error-bg)   !important; color: var(--bm-error-text)   !important; border: 1px solid var(--bm-error-border)   !important; }

md-dialog [style*="inline-flex"] md-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

md-dialog[aria-label="Datasource References"] md-dialog-content {
  padding-top: 20px !important;
}




/* ── 19. Connection Result Dialog ─────────────────────────── */

.connection-result-dialog {
  width: 600px !important;
  max-width: 95vw !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: var(--bm-r-xl) !important;
  overflow: hidden !important;
}


/* Success toolbar — teal gradient */
.toolbar-success {
  background: linear-gradient(135deg, var(--bm-success) 0%, #34d399 100%) !important;
  color: var(--bm-text-inverse) !important;
}


/* Error toolbar */
.toolbar-error {
  background: linear-gradient(135deg, var(--bm-error) 0%, #f87171 100%) !important;
  color: var(--bm-text-inverse) !important;
}


/* ── 20. Animations ───────────────────────────────────────── */

@keyframes bm-ds-row-fade-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0);    }
}

@keyframes bm-ds-pulse-delete {
  0%, 100% { box-shadow: 0 0 0 0   rgba(220,38,38,.4); }
  50%       { box-shadow: 0 0 0 4px rgba(220,38,38,.0); }
}

@keyframes bm-ds-pulse-icon {
  0%, 100% { transform: scale(1);    opacity: 0.8; }
  50%       { transform: scale(1.05); opacity: 1;   }
}


/* ── 21. Responsive ───────────────────────────────────────── */

@media (max-width: 1200px) { :where(.datasources-dialog) .ds-col-host { display: none !important; } }
@media (max-width: 1000px) { :where(.datasources-dialog) .ds-col-type { display: none !important; } }

@media (max-width: 768px) {
  .datasources-dialog { width: 100vw !important; height: 100vh !important; border-radius: 0 !important; }
  :where(.datasources-dialog) .ds-controls-bar { flex-wrap: wrap !important; }
  :where(.datasources-dialog) .ds-controls-left { flex-wrap: wrap !important; }
  :where(.datasources-dialog) .ds-controls-right { flex-wrap: wrap !important; margin-left: 0 !important; width: 100% !important; }
  :where(.datasources-dialog) .ds-search-container { width: 100% !important; }
  :where(.datasources-dialog) .ds-type-container { width: calc(50% - 5px) !important; }
  :where(.datasources-dialog) .ds-status-container { width: calc(50% - 5px) !important; }
  :where(.datasources-dialog) .ds-sort-container { width: calc(50% - 5px) !important; }
  :where(.datasources-dialog) .ds-list-header { display: none !important; }
  :where(.datasources-dialog) .ds-row { flex-wrap: wrap !important; padding: 12px 12px 12px 18px !important; gap: 8px !important; align-items: flex-start !important; }
  :where(.datasources-dialog) .ds-col-env,
:where(.datasources-dialog) .ds-col-type,
:where(.datasources-dialog) .ds-col-host { display: none !important; }
}