/* ================================================================
   BIZMETRY DESIGN SYSTEM — create-api-collection-dialog.css
   ================================================================
   Tokens → Dialog → Toolbar → Step Indicator → Content
   → Source Cards → URL Input → File Picker → Status Banners
   → Details Summary → Readonly Fields → Text Inputs → Footer
   → Animations → Responsive
   ================================================================ */

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

.cac-dialog {

  /* ── Navy ──────────────────────────────────────────────── */
  --bm-navy-900:  #111827;
  --bm-navy-800:  #1E2A3A;
  --bm-navy-500:  #4B5878;
  --bm-navy-300:  #8E97B4;
  --bm-navy-200:  #BFC5D8;
  --bm-navy-100:  #DDE2EF;
  --bm-navy-50:   #F4F5FA;

  /* ── Brand gradient ────────────────────────────────────── */
  --bm-indigo-600: #4756e8;
  --bm-indigo-500: #5b6cf9;
  --bm-indigo-200: #a5b4fc;
  --bm-indigo-50:  #eef0ff;
  --bm-violet-600: #764ba2;
  --bm-violet-500: #7c3aed;
  --bm-violet-100: #ede9fe;
  --bm-violet-50:  #f5f3ff;
  --bm-grad-brand: linear-gradient(135deg, #5b6cf9 0%, #764ba2 100%);

  /* ── Teal (file source accent) ─────────────────────────── */
  --bm-info:           #2563EB;
  --bm-info-bg:        #EFF6FF;
  --bm-info-border:    #BFDBFE;
  --bm-info-text:      #1E40AF;

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

  /* ── 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 ───────────────────────────────────── */
  --cac-h-ctrl: 40px;

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

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

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

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


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

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

.cac-toolbar .md-toolbar-tools {
  padding: 0 20px 0 20px !important;
  min-height: 68px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  justify-content: flex-start !important;
}

/* AM applies padding-left via its own rule; override with higher specificity */
md-toolbar.cac-toolbar .md-toolbar-tools,
.cac-dialog md-toolbar .md-toolbar-tools {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.cac-toolbar-icon {
  color: var(--bm-text-inverse) !important;
  font-size: 26px !important;
  width: 26px !important;
  height: 26px !important;
  flex-shrink: 0 !important;
}

.cac-header-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

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

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

.cac-toolbar .md-toolbar-tools > span[flex] {
  flex: 1 !important;
  min-width: 12px !important;
}

.cac-close-btn {
  color: rgba(255,255,255,.75) !important;
  min-width: 36px !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  border-radius: var(--bm-r-md) !important;
  transition: var(--bm-t) !important;
}

.cac-close-btn:hover { background: rgba(255,255,255,.12) !important; }


/* ── 4. Step Indicator Bar ────────────────────────────────── */

.cac-steps-bar {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px 40px 16px !important;
  background: var(--bm-surface) !important;
  border-bottom: 1px solid var(--bm-border) !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

/* Horizontal connector line */
.cac-steps-connector {
  position: absolute !important;
  top: 50% !important;
  left: 80px !important;
  right: 80px !important;
  height: 2px !important;
  background: var(--bm-border) !important;
  transform: translateY(-50%) !important;
  z-index: 0 !important;
  margin-top: -4px !important;
}

.cac-step {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 1 !important;
  max-width: 160px !important;
}

/* Step bubble */
.cac-step-bubble {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--bm-font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  transition: var(--bm-t) !important;
  border: 2.5px solid var(--bm-border-strong) !important;
  background: var(--bm-surface) !important;
  color: var(--bm-text-muted) !important;
  box-shadow: var(--bm-shadow-xs) !important;
}

.cac-step-bubble md-icon {
  font-size: 17px !important;
  width: 17px !important;
  height: 17px !important;
}

/* Active bubble */
.cac-step--active .cac-step-bubble {
  background: var(--bm-grad-brand) !important;
  border-color: transparent !important;
  color: var(--bm-text-inverse) !important;
  box-shadow: 0 2px 8px rgba(91,108,249,.28), 0 0 0 4px rgba(91,108,249,.12) !important;
}

/* Done bubble — success green */
.cac-step--done .cac-step-bubble {
  background: var(--bm-success-bg) !important;
  border-color: var(--bm-success-border) !important;
  color: var(--bm-success) !important;
}

.cac-step--done .cac-step-bubble md-icon {
  color: var(--bm-success) !important;
}

/* Step label */
.cac-step-label {
  font-family: var(--bm-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  color: var(--bm-text-muted) !important;
  white-space: nowrap !important;
}

.cac-step--active .cac-step-label { color: var(--bm-indigo-500) !important; }
.cac-step--done   .cac-step-label { color: var(--bm-success) !important; }


/* ── 5. Dialog Content ────────────────────────────────────── */

.cac-content {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 28px 32px 12px !important;
  background: var(--bm-surface-2) !important;
  height: 580px !important;
  min-height: 580px !important;
  max-height: 580px !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

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

.cac-step-body { animation: bm-cac-fade-in .22s ease both !important; text-align: left !important; }

.cac-step-body--viewer {
  padding: 0 !important;
  margin: -28px -32px -12px !important;
  height: 580px !important;
  overflow: hidden !important;
}

.cac-step-intro {
  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 22px 0 !important;
}


/* ── 6. Source Option Cards ───────────────────────────────── */

.cac-source-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-bottom: 24px !important;
}

.cac-source-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  border-radius: var(--bm-r-lg) !important;
  border: 1.5px solid var(--bm-border) !important;
  background: var(--bm-surface) !important;
  cursor: pointer !important;
  transition: var(--bm-t) !important;
  user-select: none !important;
}

.cac-source-card:hover {
  border-color: var(--bm-indigo-200) !important;
  background: var(--bm-indigo-50) !important;
  box-shadow: 0 2px 8px rgba(91,108,249,.08) !important;
}

.cac-source-card--selected {
  border-color: var(--bm-indigo-500) !important;
  background: var(--bm-indigo-50) !important;
  box-shadow: 0 0 0 3px rgba(91,108,249,.10), var(--bm-shadow-sm) !important;
}

/* Radio indicator */
.cac-source-card-radio {
  width: 20px !important;
  height: 20px !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;
  margin-top: 2px !important;
  transition: var(--bm-t) !important;
}

.cac-source-card--selected .cac-source-card-radio {
  border-color: var(--bm-indigo-500) !important;
}

.cac-radio-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: transparent !important;
  transition: var(--bm-t) !important;
}

.cac-source-card--selected .cac-radio-dot {
  background: var(--bm-indigo-500) !important;
}

/* Icon wrapper */
.cac-source-card-icon-wrap {
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--bm-r-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.cac-source-card-icon-wrap md-icon {
  font-size: 24px !important;
  width: 24px !important;
  height: 24px !important;
}

/* URL source — violet tint */
.cac-source-card-icon-wrap--url {
  background: var(--bm-violet-50) !important;
}
.cac-source-card-icon-wrap--url md-icon { color: var(--bm-violet-600) !important; }

/* File source — info blue tint */
.cac-source-card-icon-wrap--file {
  background: var(--bm-info-bg) !important;
}
.cac-source-card-icon-wrap--file md-icon { color: var(--bm-info-text) !important; }

/* Blank source (Swagger editor) — brand indigo tint */
.cac-source-card-icon-wrap--blank {
  background: rgba(91,108,249,.10) !important;
}
.cac-source-card-icon-wrap--blank md-icon { color: #4756e8 !important; }

/* Card text */
.cac-source-card-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.cac-source-card-title {
  font-family: var(--bm-font-body) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--bm-text-primary) !important;
}

.cac-source-card-desc {
  font-family: var(--bm-font-body) !important;
  font-size: 13px !important;
  color: var(--bm-text-muted) !important;
  line-height: 1.55 !important;
}

.cac-source-card-desc code {
  background: var(--bm-surface-3) !important;
  padding: 1px 4px !important;
  border-radius: var(--bm-r-sm) !important;
  font-family: var(--bm-font-mono) !important;
  font-size: 12px !important;
  color: var(--bm-violet-600) !important;
}


/* ── 7. Panel Section ─────────────────────────────────────── */

.cac-source-panel { animation: bm-cac-fade-in .2s ease both !important; }

.cac-panel-section {
  background: var(--bm-surface) !important;
  border: 1.5px solid var(--bm-border) !important;
  border-radius: var(--bm-r-lg) !important;
  padding: 20px 22px 18px !important;
  text-align: left !important;
}


/* ── 8. Form Fields ───────────────────────────────────────── */

.cac-required { color: var(--bm-error) !important; margin-left: 2px !important; }

.cac-field {
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
}

.cac-field > label {
  display: block !important;
  position: static !important;
  transform: none !important;
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--bm-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  margin-bottom: 7px !important;
  pointer-events: none !important;
}

.cac-field .md-errors-spacer { display: none !important; min-height: 0 !important; }

.cac-select {
  width: 100% !important;
  min-height: var(--cac-h-ctrl) !important;
  height: var(--cac-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;
  transition: var(--bm-t) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

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

.cac-select .md-select-value {
  height: var(--cac-h-ctrl) !important;
  min-height: var(--cac-h-ctrl) !important;
  line-height: var(--cac-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;
}

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

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

/* Agent option row */
.cac-agent-option { display: flex !important; align-items: center !important; gap: 8px !important; width: 100% !important; }
.cac-agent-option-icon { font-size: 18px !important; width: 18px !important; height: 18px !important; color: var(--bm-text-muted) !important; flex-shrink: 0 !important; }
.cac-agent-option-name { font-family: var(--bm-font-body) !important; font-size: 13.5px !important; font-weight: 600 !important; color: var(--bm-text-primary) !important; flex: 1 !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.cac-agent-option-host { font-family: var(--bm-font-mono) !important; font-size: 12px !important; color: var(--bm-text-muted) !important; white-space: nowrap !important; flex-shrink: 0 !important; }

/* Loading inside select */
.cac-select-loading {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--bm-font-body) !important;
  font-size: 13px !important;
  color: var(--bm-text-muted) !important;
  font-style: italic !important;
}

.cac-mini-spinner         { display: inline-flex !important; }
.cac-mini-spinner circle  { stroke: var(--bm-indigo-500) !important; }

/* No-agents warning */
.cac-no-agents-warn {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 8px !important;
  background: var(--bm-warning-bg) !important;
  border-left: 3px solid var(--bm-warning) !important;
  border: 1px solid var(--bm-warning-border) !important;
  border-left-width: 3px !important;
  border-radius: var(--bm-r-md) !important;
  padding: 10px 14px !important;
  margin-bottom: 18px !important;
  font-family: var(--bm-font-body) !important;
  font-size: 13px !important;
  color: var(--bm-warning-text) !important;
  line-height: 1.4 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  float: none !important;
}

/* Override any AM centering from parent md-input-container */
.cac-panel-section .cac-no-agents-warn,
.cac-dialog .cac-no-agents-warn {
  justify-content: flex-start !important;
  text-align: left !important;
}

.cac-no-agents-warn > span {
  text-align: left !important;
  flex: 1 !important;
}

.cac-no-agents-warn md-icon {
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  color: var(--bm-warning) !important;
  flex-shrink: 0 !important;
}


/* ── 9. URL Input Row ─────────────────────────────────────── */

.cac-field-label {
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--bm-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  margin-bottom: 7px !important;
  display: block !important;
}

.cac-url-input-row {
  display: flex !important;
  align-items: center !important;
  border: 1.5px solid var(--bm-border) !important;
  border-radius: var(--bm-r-md) !important;
  overflow: hidden !important;
  background: var(--bm-surface) !important;
  transition: var(--bm-t) !important;
  height: var(--cac-h-ctrl) !important;
}

.cac-url-input-row:focus-within {
  border-color: var(--bm-indigo-500) !important;
  box-shadow: 0 0 0 3px rgba(91,108,249,.10) !important;
}

.cac-url-input-row--error,
.cac-url-input-row--error:focus-within {
  border-color: var(--bm-error) !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.10) !important;
}

.cac-url-prefix {
  padding: 0 12px !important;
  font-family: var(--bm-font-mono) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--bm-text-muted) !important;
  background: var(--bm-surface-3) !important;
  border-right: 1.5px solid var(--bm-border) !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  user-select: none !important;
}

.cac-url-input {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  padding: 0 14px !important;
  font-family: var(--bm-font-mono) !important;
  font-size: 13.5px !important;
  color: var(--bm-text-primary) !important;
  background: transparent !important;
  height: 100% !important;
}

.cac-url-input::placeholder { color: var(--bm-text-muted) !important; font-style: italic !important; }

.cac-field-hint {
  display: block !important;
  margin-top: 6px !important;
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  color: var(--bm-text-muted) !important;
}

.cac-field-hint code {
  color: var(--bm-indigo-500) !important;
  background: var(--bm-indigo-50) !important;
  padding: 1px 5px !important;
  border-radius: var(--bm-r-sm) !important;
  font-family: var(--bm-font-mono) !important;
  font-size: 12px !important;
}

/* URL validation error */
.cac-url-error {
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
  margin-top: 6px !important;
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--bm-error-text) !important;
  line-height: 1.4 !important;
  animation: bm-cac-fade-in .15s ease both !important;
}

.cac-url-error > md-icon {
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  flex-shrink: 0 !important;
  color: var(--bm-error) !important;
  margin-top: 1px !important;
}

.cac-url-error > span { flex: 1 !important; }


/* ── 10. Fetch / Save Status Banners ──────────────────────── */

.cac-fetch-status {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-family: var(--bm-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
  border-radius: var(--bm-r-md) !important;
  animation: bm-cac-fade-in .2s ease !important;
}

.cac-fetch-status md-icon { font-size: 17px !important; width: 17px !important; height: 17px !important; }

.cac-fetch-status--fetching { background: var(--bm-indigo-50) !important; color: var(--bm-indigo-500) !important; }
.cac-fetch-status--fetching .cac-mini-spinner { margin-right: 2px !important; }

.cac-fetch-status--success { background: var(--bm-success-bg) !important; color: var(--bm-success-text) !important; }
.cac-fetch-status--success md-icon { color: var(--bm-success) !important; }

.cac-fetch-status--error { background: var(--bm-error-bg) !important; color: var(--bm-error-text) !important; }
.cac-fetch-status--error md-icon { color: var(--bm-error) !important; }


/* ── 11. File Picker ──────────────────────────────────────── */

.cac-file-pick-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.cac-pick-btn {
  background: var(--bm-info-bg) !important;
  color: var(--bm-info-text) !important;
  border-radius: var(--bm-r-md) !important;
  padding: 0 20px !important;
  height: var(--cac-h-ctrl) !important;
  min-height: var(--cac-h-ctrl) !important;
  font-family: var(--bm-font-body) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: none !important;
  border: 1.5px solid var(--bm-info-border) !important;
  transition: var(--bm-t) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.cac-pick-btn:hover {
  background: var(--bm-info-border) !important;
  border-color: var(--bm-info) !important;
  box-shadow: 0 2px 8px rgba(37,99,235,.14) !important;
  transform: translateY(-1px) !important;
}

.cac-pick-btn md-icon {
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  color: var(--bm-info-text) !important;
  margin: 0 !important;
}

.cac-file-hint {
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  color: var(--bm-text-muted) !important;
}

.cac-file-hint code {
  background: var(--bm-surface-3) !important;
  padding: 1px 4px !important;
  border-radius: var(--bm-r-sm) !important;
  font-family: var(--bm-font-mono) !important;
  font-size: 11px !important;
  color: var(--bm-text-secondary) !important;
}

/* Selected file card */
.cac-file-selected { margin-top: 16px !important; animation: bm-cac-fade-in .2s ease both !important; }

.cac-file-selected-inner {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: var(--bm-surface) !important;
  border: 1.5px solid var(--bm-info-border) !important;
  border-radius: var(--bm-r-md) !important;
  padding: 12px 14px !important;
}

.cac-file-icon {
  font-size: 26px !important;
  width: 26px !important;
  height: 26px !important;
  color: var(--bm-info) !important;
  flex-shrink: 0 !important;
}

.cac-file-info { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
.cac-file-name { font-family: var(--bm-font-body) !important; font-size: 13.5px !important; font-weight: 600 !important; color: var(--bm-text-primary) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.cac-file-size { font-family: var(--bm-font-body) !important; font-size: 11px !important; color: var(--bm-text-muted) !important; }

.cac-file-clear-btn {
  color: var(--bm-text-muted) !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  border-radius: var(--bm-r-sm) !important;
}

.cac-file-clear-btn md-icon { font-size: 18px !important; width: 18px !important; height: 18px !important; }


/* ── 12. File Parse Status ────────────────────────────────── */

.cac-file-parsed-ok,
.cac-file-parse-error {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin-top: 8px !important;
  padding: 10px 14px !important;
  border-radius: var(--bm-r-md) !important;
  font-family: var(--bm-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  animation: bm-cac-fade-in .2s ease !important;
}

.cac-file-parsed-ok  { background: var(--bm-success-bg) !important; color: var(--bm-success-text) !important; border: 1px solid var(--bm-success-border) !important; }
.cac-file-parse-error { background: var(--bm-error-bg) !important; color: var(--bm-error-text) !important; border: 1px solid var(--bm-error-border) !important; }

.cac-file-parsed-ok > md-icon,
.cac-file-parse-error > md-icon {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  flex-shrink: 0 !important;
  margin: 2px 0 0 0 !important;
}

.cac-file-parsed-ok  > md-icon { color: var(--bm-success) !important; }
.cac-file-parse-error > md-icon { color: var(--bm-error) !important; }
.cac-file-parsed-ok > span,
.cac-file-parse-error > span { flex: 1 !important; }


/* ── 13. Step 2 — Details Summary ────────────────────────── */

.cac-details-summary {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: var(--bm-surface) !important;
  border: 1.5px solid var(--bm-border) !important;
  border-left: 4px solid var(--bm-indigo-500) !important;
  border-radius: var(--bm-r-lg) !important;
  padding: 16px 20px !important;
  animation: bm-cac-fade-in .22s ease both !important;
}

.cac-details-summary-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--bm-r-md) !important;
  background: var(--bm-indigo-50) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.cac-details-summary-icon md-icon {
  font-size: 24px !important;
  width: 24px !important;
  height: 24px !important;
  color: var(--bm-indigo-500) !important;
}

.cac-details-summary-text { display: flex !important; flex-direction: column !important; gap: 4px !important; flex: 1 !important; min-width: 0 !important; }

.cac-details-summary-title {
  font-family: var(--bm-font-display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--bm-text-primary) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cac-details-summary-meta {
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  color: var(--bm-text-muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}

.cac-details-summary-src-icon {
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
  vertical-align: middle !important;
}


/* ── 14. Step 2 — Readonly Fields ─────────────────────────── */

.cac-field-row { margin-bottom: 16px !important; }

.cac-readonly-field {
  background: var(--bm-surface-2) !important;
  border: 1.5px solid var(--bm-border) !important;
  border-left: 3px solid var(--bm-indigo-200) !important;
  border-radius: var(--bm-r-md) !important;
  padding: 12px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

.cac-readonly-label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--bm-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--bm-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.cac-readonly-icon {
  font-size: 15px !important;
  width: 15px !important;
  height: 15px !important;
  color: var(--bm-indigo-500) !important;
  flex-shrink: 0 !important;
}

.cac-readonly-value-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.cac-tags-list { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }

.cac-no-value {
  font-family: var(--bm-font-body) !important;
  font-size: 13px !important;
  color: var(--bm-navy-200) !important;
  font-style: italic !important;
  margin: 0 !important;
}

.cac-readonly-hint {
  font-family: var(--bm-font-body) !important;
  font-size: 11px !important;
  color: var(--bm-text-muted) !important;
  font-style: italic !important;
}

.cac-readonly-hint code {
  background: var(--bm-surface-3) !important;
  padding: 1px 4px !important;
  border-radius: var(--bm-r-sm) !important;
  font-family: var(--bm-font-mono) !important;
  font-size: 11px !important;
  color: var(--bm-text-secondary) !important;
  font-style: normal !important;
}


/* ── 15. Step 2 — Editable Text Controls ─────────────────── */

.cac-text-input-wrap {
  display: flex !important;
  border: 1.5px solid var(--bm-border) !important;
  border-radius: var(--bm-r-md) !important;
  overflow: hidden !important;
  background: var(--bm-surface) !important;
  transition: var(--bm-t) !important;
  height: var(--cac-h-ctrl) !important;
}

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

.cac-text-input {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  padding: 0 14px !important;
  font-family: var(--bm-font-body) !important;
  font-size: 13.5px !important;
  color: var(--bm-text-primary) !important;
  background: transparent !important;
  height: 100% !important;
}

.cac-text-input::placeholder { color: var(--bm-text-muted) !important; font-style: italic !important; }

.cac-text-input--readonly {
  background: var(--bm-surface-2) !important;
  color: var(--bm-text-secondary) !important;
  cursor: default !important;
}

.cac-textarea-wrap {
  border: 1.5px solid var(--bm-border) !important;
  border-radius: var(--bm-r-md) !important;
  overflow: hidden !important;
  background: var(--bm-surface) !important;
  transition: var(--bm-t) !important;
}

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

.cac-textarea {
  width: 100% !important;
  border: none !important;
  outline: none !important;
  padding: 12px 14px !important;
  font-family: var(--bm-font-body) !important;
  font-size: 13.5px !important;
  color: var(--bm-text-primary) !important;
  background: transparent !important;
  resize: vertical !important;
  min-height: 80px !important;
  box-sizing: border-box !important;
}

.cac-textarea::placeholder { color: var(--bm-text-muted) !important; font-style: italic !important; }

.cac-char-count {
  display: block !important;
  margin-top: 4px !important;
  font-family: var(--bm-font-body) !important;
  font-size: 11px !important;
  color: var(--bm-text-muted) !important;
  text-align: right !important;
}


/* ── 16. Footer Actions ───────────────────────────────────── */

.cac-actions {
  display: flex !important;
  align-items: center !important;
  padding: 14px 24px !important;
  border-top: 1px solid var(--bm-border) !important;
  background: var(--bm-surface) !important;
  flex-shrink: 0 !important;
  min-height: 64px !important;
  gap: 10px !important;
  box-shadow: 0 -2px 8px rgba(8,12,24,.06) !important;
}

.cac-actions > span[flex] { flex: 1 !important; }

.cac-btn-cancel, .cac-btn-prev, .cac-btn-next {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 20px !important;
  height: 38px !important;
  min-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;
  margin: 0 !important;
  transition: var(--bm-t) !important;
}

/* Cancel / Back */
.cac-btn-cancel, .cac-btn-prev {
  background: var(--bm-surface) !important;
  color: var(--bm-text-secondary) !important;
  border: 1.5px solid var(--bm-border-strong) !important;
}

.cac-btn-cancel:hover, .cac-btn-prev:hover {
  background: var(--bm-surface-2) !important;
  border-color: var(--bm-navy-300) !important;
}

.cac-btn-cancel md-icon, .cac-btn-prev md-icon {
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  color: var(--bm-text-muted) !important;
  margin: 0 !important;
}

/* Next / Create */
.cac-btn-next {
  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;
}

.cac-btn-next:not([disabled]):hover {
  box-shadow: 0 5px 16px rgba(91,108,249,.36) !important;
  transform: translateY(-1px) !important;
}

/* Disabled — AM uses both [disabled] attribute and .md-button[disabled] */
.cac-btn-next[disabled],
.cac-btn-next.md-button[disabled],
.cac-dialog .cac-btn-next[disabled] {
  opacity: 1 !important;
  background: var(--bm-surface-3, #EFF1F8) !important;
  color: var(--bm-text-muted, #8E97B4) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  border: 1.5px solid var(--bm-border-strong, #C5CCDF) !important;
  transform: none !important;
}

.cac-btn-next[disabled] md-icon,
.cac-btn-next.md-button[disabled] md-icon {
  color: var(--bm-text-muted, #8E97B4) !important;
}

.cac-btn-next:not([disabled]) md-icon {
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  color: var(--bm-text-inverse) !important;
  margin: 0 !important;
}

.cac-btn-spinner { margin-right: 4px !important; }
.cac-btn-spinner circle { stroke: var(--bm-text-inverse) !important; }


/* ── 17. Animations ───────────────────────────────────────── */

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


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

@media (max-width: 780px) {
  .cac-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    height: 100vh !important;
    min-height: unset !important;
    border-radius: 0 !important;
  }

  .cac-content {
    height: calc(100vh - 280px) !important;
    min-height: unset !important;
    max-height: unset !important;
    padding: 20px 16px 8px !important;
  }

  .cac-step-body--viewer {
    margin: -20px -16px -8px !important;
    height: calc(100vh - 300px) !important;
  }

  .cac-source-card { padding: 14px !important; }
  .cac-source-card-icon-wrap { display: none !important; }
  .cac-actions { padding: 12px 16px !important; }
  .cac-steps-connector { left: 50px !important; right: 50px !important; }
}