/* ================================================================
   BIZMETRY DESIGN SYSTEM — datasource-form.css
   Requires: datasource-common.css
   ================================================================
   Tokens → Dialog → Toolbar → Content → Form Sections
   → Field Groups → Inputs → Password Toggle → Validation
   → MD-Select → Info Box → Name Feedback → Test Connection
   → Footer Actions → Animations → Responsive
   ================================================================ */

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

.datasource-form-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 gradient ────────────────────────────────────── */
  --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);

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

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


/* Protect Material Icons */
.datasource-form-dialog md-icon,
.datasource-form-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 ──────────────────────────────────────── */

.datasource-form-dialog {
  width: 680px !important;
  max-width: 95vw !important;
  height: 88vh !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(.datasource-form-dialog) .datasource-form-toolbar {
  background: var(--bm-grad-brand) !important;
  box-shadow: 0 2px 12px rgba(102,126,234,.28) !important;
  min-height: 68px !important;
  flex-shrink: 0 !important;
}


/* FIX 1: título alineado a izquierda — eliminar justify-content centrado de AM */
:where(.datasource-form-dialog) .datasource-form-toolbar .md-toolbar-tools {
  padding: 0 24px !important;
  min-height: 68px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;  /* ya estaba, asegurar que AM no lo sobreescriba */
  gap: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}


/* AM override: .md-toolbar-tools suele centrar con text-align center */
:where(.datasource-form-dialog) .datasource-form-toolbar .md-toolbar-tools,
:where(.datasource-form-dialog) .datasource-form-toolbar .md-toolbar-tools > h2,
:where(.datasource-form-dialog) .datasource-form-toolbar .md-toolbar-tools > h1 {
  text-align: left !important;
}

:where(.datasource-form-dialog) .datasource-form-toolbar .md-toolbar-tools > * { flex-shrink: 0 !important; }

:where(.datasource-form-dialog) .datasource-form-icon {
  color: var(--bm-text-inverse) !important;
  font-size: 24px !important;
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  opacity: 0.9 !important;
}

:where(.datasource-form-dialog) .datasource-form-header-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 !important;
  min-width: 0 !important;
  align-items: flex-start !important;  /* FIX 1: forzar alineación interna a izquierda */
  text-align: left !important;
}

:where(.datasource-form-dialog) .datasource-form-header-info h2 {
  font-family: var(--bm-font-display) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--bm-text-inverse) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.1px !important;
  text-align: left !important;
}

:where(.datasource-form-dialog) .datasource-form-subtitle {
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  color: rgba(255,255,255,.65) !important;
  font-weight: 400 !important;
  text-align: left !important;
}

:where(.datasource-form-dialog) .datasource-form-toolbar .md-icon-button {
  color: rgba(255,255,255,.80) !important;
  border-radius: var(--bm-r-md) !important;
  flex-shrink: 0 !important;
}

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




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

.datasource-form-content {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 20px 24px 24px !important;
  background: var(--bm-surface-2) !important;
}

.datasource-form-content::-webkit-scrollbar { width: 6px; }
.datasource-form-content::-webkit-scrollbar-track { background: transparent; }
.datasource-form-content::-webkit-scrollbar-thumb { background: var(--bm-border-strong); border-radius: var(--bm-r-pill); }
.datasource-form-content::-webkit-scrollbar-thumb:hover { background: var(--bm-navy-300); }


/* ── 5. Form Sections ─────────────────────────────────────── */



:where(.datasource-form-dialog) .form-section:last-child { margin-bottom: 0 !important; }

:where(.datasource-form-dialog) .form-section:focus-within {
  box-shadow: 0 2px 12px rgba(102,126,234,.10) !important;
  border-color: var(--bm-teal-200) !important;
}

/* Section header */


:where(.datasource-form-dialog) .section-icon-wrap {
  width: 30px !important;
  height: 30px !important;
  border-radius: var(--bm-r-md) !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

:where(.datasource-form-dialog) .section-icon {
  color: var(--bm-teal-500) !important;
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
}

:where(.datasource-form-dialog) .section-title {
  font-family: var(--bm-font-display) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--bm-text-primary) !important;
  margin: 0 !important;
  letter-spacing: 0.1px !important;
}

:where(.datasource-form-dialog) .section-badge {
  margin-left: auto !important;
  font-family: var(--bm-font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--bm-teal-500) !important;
  background: var(--bm-teal-50) !important;
  padding: 2px 8px !important;
  border-radius: var(--bm-r-pill) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}




/* ── 6. Field Groups ──────────────────────────────────────── */

:where(.datasource-form-dialog) .field-group { margin-bottom: 14px !important; }
:where(.datasource-form-dialog) .field-group:last-child { margin-bottom: 0 !important; }

:where(.datasource-form-dialog) .field-group.two-col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

:where(.datasource-form-dialog) .field-group.host-port {
  display: grid !important;
  grid-template-columns: 1fr 120px !important;
  gap: 12px !important;
}



:where(.datasource-form-dialog) .field-label .required-star { color: var(--bm-error) !important; margin-left: 2px !important; }




/* ── 7. Input Containers — AM Override ───────────────────── */

.datasource-form-dialog md-input-container {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.datasource-form-dialog md-input-container > label:not(.field-label) {
  display: none !important;
}

.datasource-form-dialog md-input-container .md-errors-spacer { display: none !important; min-height: 0 !important; }
.datasource-form-dialog md-input-container .md-placeholder { display: none !important; }




/* ── 8. Inputs & Textarea ─────────────────────────────────── */

.ds-field-input,
.datasource-form-dialog md-input-container input,
.datasource-form-dialog md-input-container textarea {
  display: block !important;
  width: 100% !important;
  padding: 10px 14px !important;
  border: 1.5px solid var(--bm-border) !important;
  border-radius: var(--bm-r-md) !important;
  font-family: var(--bm-font-body) !important;
  font-size: 13.5px !important;
  color: var(--bm-text-primary) !important;
  background: var(--bm-surface-2) !important;
  transition: border-color var(--bm-t), box-shadow var(--bm-t), background var(--bm-t) !important;
  box-sizing: border-box !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  min-height: 40px !important;
  outline: none !important;
}

.ds-field-input:focus,
.datasource-form-dialog md-input-container input:focus,
.datasource-form-dialog md-input-container textarea:focus {
  border-color: var(--bm-teal-500) !important;
  background: var(--bm-surface) !important;
  box-shadow: 0 0 0 3px rgba(102,126,234,.10) !important;
}

.datasource-form-dialog md-input-container textarea {
  resize: none !important;
  min-height: 76px !important;
  line-height: 1.55 !important;
}

.datasource-form-dialog input::placeholder,
.datasource-form-dialog textarea::placeholder {
  color: var(--bm-text-muted) !important;
  opacity: 1 !important;
  font-style: italic !important;
  font-size: 13px !important;
}


/* Disabled */
.datasource-form-dialog md-input-container input[disabled],
.datasource-form-dialog md-input-container textarea[disabled] {
  background: var(--bm-surface-3) !important;
  color: var(--bm-text-muted) !important;
  cursor: not-allowed !important;
  border-color: var(--bm-border) !important;
}


/* Number — hide spinners */
.datasource-form-dialog input[type="number"]::-webkit-inner-spin-button,
.datasource-form-dialog input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.datasource-form-dialog input[type="number"] { -moz-appearance: textfield; }




/* ── 9. Password Field with Toggle ───────────────────────── */

:where(.datasource-form-dialog) .password-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

:where(.datasource-form-dialog) .password-wrapper input { padding-right: 44px !important; }

:where(.datasource-form-dialog) .password-toggle {
  position: absolute !important;
  right: 4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--bm-r-sm) !important;
  transition: background var(--bm-t) !important;
  color: var(--bm-text-muted) !important;
}

:where(.datasource-form-dialog) .password-toggle:hover {
  background: var(--bm-teal-50) !important;
  color: var(--bm-teal-500) !important;
}

:where(.datasource-form-dialog) .password-toggle md-icon {
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  color: inherit !important;
}




/* ── 10. Validation Messages ──────────────────────────────── */

:where(.datasource-form-dialog) .field-error {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-top: 5px !important;
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--bm-error-text) !important;
  animation: bm-dsf-slide-up .15s ease-out !important;
}

:where(.datasource-form-dialog) .field-error md-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
  line-height: 14px !important;
  color: var(--bm-error) !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
}

.field-checking {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-top: 5px !important;
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  color: var(--bm-text-muted) !important;
}

.field-checking md-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  width: 13px !important;
  height: 13px !important;
  line-height: 13px !important;
  color: var(--bm-text-muted) !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  animation: bm-dsf-spin 1s linear infinite !important;
}


/* AM invalid states */
.datasource-form-dialog md-input-container.md-input-invalid input,
.datasource-form-dialog md-input-container.md-input-invalid textarea {
  border-color: var(--bm-error) !important;
  background: var(--bm-error-bg) !important;
}

.datasource-form-dialog md-input-container.md-input-invalid input:focus,
.datasource-form-dialog md-input-container.md-input-invalid textarea:focus {
  box-shadow: 0 0 0 3px rgba(220,38,38,.10) !important;
}

.datasource-form-dialog [ng-messages] {
  margin-top: 5px !important;
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  color: var(--bm-error-text) !important;
  display: block !important;
  font-weight: 500 !important;
}

.datasource-form-dialog [ng-message] {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  line-height: 1.4 !important;
}




/* ── 11. MD-Select ────────────────────────────────────────── */

.datasource-form-dialog md-select {
  display: block !important;
  width: 100% !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border: 1.5px solid var(--bm-border) !important;
  border-radius: var(--bm-r-md) !important;
  background: var(--bm-surface-2) !important;
  transition: border-color var(--bm-t), box-shadow var(--bm-t) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.datasource-form-dialog md-select:focus {
  border-color: var(--bm-teal-500) !important;
  background: var(--bm-surface) !important;
  box-shadow: 0 0 0 3px rgba(102,126,234,.10) !important;
  outline: none !important;
}

.datasource-form-dialog md-select .md-select-value {
  height: 40px !important;
  min-height: 40px !important;
  border: none !important;
  padding: 0 !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;
}

.datasource-form-dialog md-select .md-select-value span {
  color: var(--bm-text-primary) !important;
  opacity: 1 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}

.datasource-form-dialog md-select .md-select-value .md-select-placeholder {
  color: var(--bm-text-muted) !important;
  font-size: 13px !important;
  font-style: italic !important;
}

.datasource-form-dialog md-select .md-select-icon { color: var(--bm-text-muted) !important; margin-top: 0 !important; }

.datasource-form-dialog md-select[disabled] {
  background: var(--bm-surface-3) !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}

.datasource-form-dialog md-select[disabled] .md-select-value span { color: var(--bm-text-muted) !important; }

.datasource-form-dialog md-input-container.md-input-invalid md-select {
  border-color: var(--bm-error) !important;
  background: var(--bm-error-bg) !important;
}


/* ── 12. Info Box ─────────────────────────────────────────── */

/* FIX 3: alineación izquierda del info box de credentials */


:where(.datasource-form-dialog) .info-icon {
  color: var(--bm-info) !important;
  font-size: 17px !important;
  width: 17px !important;
  height: 17px !important;
  flex-shrink: 0 !important;
}







/* ── 13. Name Uniqueness Feedback ─────────────────────────── */

/* name-exists-error vive FUERA del md-input-container (ver HTML),
   por lo que fluye normalmente como bloque debajo del input. */
:where(.datasource-form-dialog) .name-exists-error {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-top: 6px !important;
  width: 100% !important;
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--bm-error-text) !important;
  animation: bm-dsf-slide-up .15s ease-out !important;
}

:where(.datasource-form-dialog) .name-exists-error md-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
  line-height: 14px !important;
  color: var(--bm-error) !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
}

:where(.datasource-form-dialog) .name-checking {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-top: 5px !important;
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  color: var(--bm-text-muted) !important;
  position: static !important;
  float: none !important;
}

:where(.datasource-form-dialog) .name-checking md-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  width: 13px !important;
  height: 13px !important;
  line-height: 13px !important;
  color: var(--bm-text-muted) !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  animation: bm-dsf-spin 1s linear infinite !important;
}


/* Asegurar que el md-input-container del nombre sea bloque normal */
.datasource-form-dialog .field-group md-input-container {
  position: relative !important;
  display: block !important;
}




/* ── 14. Test Connection ──────────────────────────────────── */

:where(.datasource-form-dialog) .test-connection-desc {
  font-family: var(--bm-font-body) !important;
  font-size: 13px !important;
  color: var(--bm-text-secondary) !important;
  margin: 0 0 14px !important;
  line-height: 1.6 !important;
}

:where(.datasource-form-dialog) .test-connection-btn {
  background: var(--bm-grad-brand) !important;
  color: var(--bm-text-inverse) !important;
  width: 100% !important;
  height: 40px !important;
  font-family: var(--bm-font-body) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: var(--bm-r-md) !important;
  text-transform: none !important;
  letter-spacing: 0.2px !important;
  box-shadow: 0 3px 10px rgba(102,126,234,.22) !important;
  transition: var(--bm-t) !important;
}

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


/* FIX 2: botón "Run Connection Test" deshabilitado — texto legible */
:where(.datasource-form-dialog) .test-connection-btn[disabled] {
  opacity: 1 !important;                              /* FIX: no bajar opacity */
  cursor: not-allowed !important;
  background: var(--bm-navy-100) !important;          /* FIX: fondo gris claro */
  color: var(--bm-navy-300) !important;               /* FIX: texto gris visible */
  box-shadow: none !important;
  border: 1.5px solid var(--bm-border-strong) !important;
}

:where(.datasource-form-dialog) .test-connection-btn[disabled] md-icon {
  color: var(--bm-navy-300) !important;               /* FIX: icono gris visible */
}

:where(.datasource-form-dialog) .test-connection-btn md-icon { color: var(--bm-text-inverse) !important; margin-right: 6px !important; }
:where(.datasource-form-dialog) .testing-text { color: var(--bm-text-inverse) !important; font-weight: 600 !important; }


/* Test result boxes */
:where(.datasource-form-dialog) .test-result-box {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-top: 14px !important;
  padding: 14px 16px !important;
  border-radius: var(--bm-r-md) !important;
  animation: bm-dsf-slide-up .25s ease-out !important;
}

:where(.datasource-form-dialog) .test-success {
  background: var(--bm-success-bg) !important;
  border: 1px solid var(--bm-success-border) !important;
  border-left: 4px solid var(--bm-success) !important;
}

:where(.datasource-form-dialog) .test-error {
  background: var(--bm-error-bg) !important;
  border: 1px solid var(--bm-error-border) !important;
  border-left: 4px solid var(--bm-error) !important;
}

:where(.datasource-form-dialog) .test-result-icon { flex-shrink: 0 !important; font-size: 22px !important; width: 22px !important; height: 22px !important; }

:where(.datasource-form-dialog) .test-success .test-result-icon { color: var(--bm-success) !important; }
:where(.datasource-form-dialog) .test-error .test-result-icon { color: var(--bm-error)   !important; }

:where(.datasource-form-dialog) .test-result-content strong {
  display: block !important;
  font-family: var(--bm-font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-bottom: 3px !important;
}

:where(.datasource-form-dialog) .test-success .test-result-content strong { color: var(--bm-success-text) !important; }
:where(.datasource-form-dialog) .test-error .test-result-content strong { color: var(--bm-error-text)   !important; }

:where(.datasource-form-dialog) .test-result-content p {
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  color: var(--bm-text-secondary) !important;
  margin: 0 !important;
  line-height: 1.45 !important;
}




/* ── 15. Footer Actions ───────────────────────────────────── */

.datasource-form-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;
  min-height: 60px !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
}

.datasource-form-actions .btn-cancel {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 18px !important;
  height: 38px !important;
  border-radius: var(--bm-r-md) !important;
  font-family: var(--bm-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  transition: var(--bm-t) !important;
  margin: 0 !important;
  background: var(--bm-surface) !important;
  color: var(--bm-text-secondary) !important;
  border: 1.5px solid var(--bm-border-strong) !important;
  box-shadow: none !important;
}

.datasource-form-actions .btn-cancel:hover {
  background: var(--bm-surface-2) !important;
  border-color: var(--bm-navy-300) !important;
}

.datasource-form-actions .btn-cancel md-icon {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  color: var(--bm-text-muted) !important;
}

.datasource-form-actions .btn-save {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 22px !important;
  height: 38px !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.1px !important;
  transition: var(--bm-t) !important;
  margin: 0 !important;
  background: var(--bm-grad-brand) !important;
  color: var(--bm-text-inverse) !important;
  border: none !important;
  box-shadow: 0 3px 10px rgba(102,126,234,.22) !important;
}

.datasource-form-actions .btn-save:not([disabled]):hover {
  box-shadow: 0 5px 16px rgba(102,126,234,.36) !important;
  transform: translateY(-1px) !important;
}


/* FIX 2: botón "Create Datasource" deshabilitado — texto visible */
.datasource-form-actions .btn-save[disabled] {
  opacity: 1 !important;                              /* FIX: no bajar opacity */
  cursor: not-allowed !important;
  background: var(--bm-navy-100) !important;          /* FIX: gris claro */
  color: var(--bm-navy-300) !important;               /* FIX: texto gris legible */
  box-shadow: none !important;
  border: 1.5px solid var(--bm-border-strong) !important;
}

.datasource-form-actions .btn-save[disabled] md-icon {
  color: var(--bm-navy-300) !important;               /* FIX: icono gris visible */
}

.datasource-form-actions .btn-save md-icon {
  font-size: 17px !important;
  width: 17px !important;
  height: 17px !important;
  color: var(--bm-text-inverse) !important;
}

:where(.datasource-form-dialog) .btn-spinner circle { stroke: var(--bm-text-inverse) !important; }


/* ── 16. Animations ───────────────────────────────────────── */

@keyframes bm-dsf-slide-up {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0);   }
}

@keyframes bm-dsf-spin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}




/* ── 17. Fix global: md-icon dentro de mensajes de validación ── */
/* Angular Material asigna display:inline a md-icon; forzamos inline-flex
   en todos los mensajes de error/checking para garantizar alineación. */
:where(.datasource-form-dialog) .field-error md-icon,
.field-checking md-icon,
:where(.datasource-form-dialog) .name-exists-error md-icon,
:where(.datasource-form-dialog) .name-checking md-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

/* ── 17. Responsive ───────────────────────────────────────── */

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

  .datasource-form-content { padding: 16px !important; }

  :where(.datasource-form-dialog) .field-group.two-col,
:where(.datasource-form-dialog) .field-group.host-port { grid-template-columns: 1fr !important; }

  
}