/* ================================================================
   BIZMETRY DESIGN SYSTEM — table-mapper-dialog.css
   ================================================================
   Tokens → Dialog → Toolbar → Info Section → Action Buttons
   → Mapping Container → Panels → Items → Badges → Warnings
   → Drop Zones → Footer → Scrollbars → Responsive
   ================================================================ */

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

.map-columns-dialog {

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

  /* ── Teal palette (primary accent for mapper) ──────────── */
  --bm-teal-600:  #009977;
  --bm-teal-500:  #00BFA5;
  --bm-teal-400:  #1AD4BA;
  --bm-teal-100:  #CCFAF3;
  --bm-teal-50:   #E6FAF7;

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

  /* ── Semantic colors ───────────────────────────────────── */
  --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);
  --bm-shadow-lg: 0 10px 30px rgba(8,12,24,.12), 0 4px 10px rgba(8,12,24,.08);

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

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




/* ── 2. Dialog Root ───────────────────────────────────────── */

.map-columns-dialog.modern-dialog {
  border-radius: var(--bm-r-xl) !important;
  overflow: hidden !important;
  box-shadow: var(--bm-shadow-lg) !important;
  font-family: var(--bm-font-body) !important;
}


/* Protect Material Icons */
.map-columns-dialog md-icon,
.map-columns-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;
}




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

.map-columns-dialog .gradient-toolbar {
  background: var(--bm-navy-900) !important;
  min-height: 68px !important;
  border-bottom: 3px solid var(--bm-teal-500) !important;
  position: relative !important;
  box-shadow: none !important;
}


/* Grid texture */
.map-columns-dialog .gradient-toolbar::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  pointer-events: none !important;
}

.map-columns-dialog .gradient-toolbar .md-toolbar-tools {
  padding: 0 24px !important;
  min-height: 68px !important;
  position: relative !important;
  z-index: 1 !important;
}

.map-columns-dialog .gradient-toolbar .md-toolbar-tools h2 {
  font-family: var(--bm-font-display) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  color: var(--bm-text-inverse) !important;
}

.map-columns-dialog .gradient-toolbar .toolbar-icon {
  color: var(--bm-teal-400) !important;
  margin-right: 12px !important;
  font-size: 22px !important;
}


/* Toolbar close button */
.map-columns-dialog .gradient-toolbar .md-icon-button {
  color: var(--bm-navy-300) !important;
  border-radius: var(--bm-r-md) !important;
}

.map-columns-dialog .gradient-toolbar .md-icon-button md-icon {
  color: var(--bm-navy-300) !important;
  transition: color var(--bm-t) !important;
}

.map-columns-dialog .gradient-toolbar .md-icon-button:hover md-icon {
  color: var(--bm-text-inverse) !important;
}




/* ── 4. Info Section ──────────────────────────────────────── */

:where(.map-columns-dialog) .mapping-info-section {
  background: var(--bm-surface) !important;
  padding: 44px 20px 18px !important;
  border-bottom: 1px solid var(--bm-border) !important;
  flex-shrink: 0 !important;
}


/* "Identity card" pattern — a colored icon avatar, a bold prominent name,
   and a small muted caption line underneath combining what used to be a
   separate label + sublabel. Source (database table) and target (resource
   type) get different accent colors so the card itself signals direction,
   not just the connector arrow between them. */
:where(.map-columns-dialog) .info-card {
  background: var(--bm-surface) !important;
  padding: 10px 16px !important;
  border-radius: var(--bm-r-lg) !important;
  border: 1px solid var(--bm-border) !important;
  box-shadow: var(--bm-shadow-sm) !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  transition: box-shadow var(--bm-t), transform var(--bm-t), border-color var(--bm-t) !important;
}

:where(.map-columns-dialog) .info-card:hover {
  box-shadow: var(--bm-shadow-md) !important;
  transform: translateY(-1px) !important;
}

:where(.map-columns-dialog) .info-card--source:hover { border-color: var(--bm-teal-400) !important; }
:where(.map-columns-dialog) .info-card--target:hover { border-color: var(--bm-indigo-500) !important; }

:where(.map-columns-dialog) .info-card-icon {
  flex-shrink: 0 !important;
  font-size: 20px !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  line-height: 42px !important;
  text-align: center !important;
  margin-right: 14px !important;
  color: #fff !important;
  border-radius: var(--bm-r-md) !important;
}

:where(.map-columns-dialog) .info-card--source .info-card-icon {
  background: linear-gradient(135deg, var(--bm-teal-400), var(--bm-teal-600)) !important;
  box-shadow: 0 2px 8px rgba(0,191,165,.32) !important;
}

:where(.map-columns-dialog) .info-card--target .info-card-icon {
  background: linear-gradient(135deg, var(--bm-indigo-500), var(--bm-violet-600)) !important;
  box-shadow: 0 2px 8px rgba(91,108,249,.32) !important;
}

:where(.map-columns-dialog) .info-card-text {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

:where(.map-columns-dialog) .info-value {
  font-family: var(--bm-font-display) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--bm-text-primary) !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

:where(.map-columns-dialog) .info-caption {
  font-family: var(--bm-font-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--bm-text-muted) !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}


/* Connector between the two cards — a small circular badge instead of a
   bare floating icon, echoing the same "chip" language as the card icons. */
:where(.map-columns-dialog) .info-flow-connector {
  flex-shrink: 0 !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: var(--bm-surface-3) !important;
  border: 1px solid var(--bm-border) !important;
}

:where(.map-columns-dialog) .info-flow-connector md-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
  line-height: 18px !important;
  margin: 0 !important;
  color: var(--bm-text-secondary) !important;
}


/* ── 5. Action Buttons ────────────────────────────────────── */






/* Auto-map — teal primary */
:where(.map-columns-dialog) .auto-map-button {
  background: var(--bm-teal-500) !important;
  color: var(--bm-navy-900) !important;
  box-shadow: 0 2px 8px rgba(0,191,165,.24) !important;
}

:where(.map-columns-dialog) .auto-map-button:hover:not([disabled]) {
  background: var(--bm-teal-600) !important;
  box-shadow: 0 4px 12px rgba(0,191,165,.32) !important;
  transform: translateY(-1px) !important;
}

:where(.map-columns-dialog) .auto-map-button md-icon {
  color: var(--bm-navy-900) !important;
}


/* Clear — neutral */
:where(.map-columns-dialog) .clear-button {
  background: var(--bm-surface-2) !important;
  color: var(--bm-text-secondary) !important;
  border: 1px solid var(--bm-border-strong) !important;
}

:where(.map-columns-dialog) .clear-button:hover:not([disabled]) {
  background: var(--bm-surface-3) !important;
  border-color: var(--bm-navy-300) !important;
}


/* Mapping counter pill */
:where(.map-columns-dialog) .mapping-counter {
  display: flex !important;
  align-items: center !important;
  padding: 6px 14px !important;
  background: var(--bm-teal-50) !important;
  border: 1px solid var(--bm-teal-100) !important;
  border-radius: var(--bm-r-pill) !important;
  font-family: var(--bm-font-body) !important;
  font-size: 13px !important;
}

:where(.map-columns-dialog) .mapping-counter md-icon {
  font-size: 18px !important;
  margin-right: 6px !important;
  color: var(--bm-teal-500) !important;
}




/* ── 6. Mapping Container ─────────────────────────────────── */

:where(.map-columns-dialog) .mapping-container {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: var(--bm-surface-2) !important;
}

:where(.map-columns-dialog) .mapping-lines-svg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 1 !important;
  overflow: visible !important;
}

.connection-line {
  fill: none !important;
  stroke-width: 3 !important;
  transition: stroke-width var(--bm-t) !important;
}

.connection-line--compat { stroke: #ff9800 !important; }
.connection-line--incompat { stroke: var(--bm-error) !important; }


/* Live wire, mid-drag — teal dashed with a marching-ants animation until it
   snaps onto a valid target (solid orange) or an invalid one (red dashed). */
.connection-line--live {
  stroke: var(--bm-teal-400) !important;
  stroke-width: 2 !important;
  stroke-dasharray: 7 4 !important;
  animation: tm-dash-march .5s linear infinite !important;
}

.connection-line--snap {
  stroke: #ff9800 !important;
  stroke-width: 3 !important;
}

.connection-line--invalid {
  stroke: var(--bm-error) !important;
  stroke-width: 2 !important;
  stroke-dasharray: 6 4 !important;
  animation: tm-dash-march .4s linear infinite !important;
}

@keyframes tm-dash-march {
  to { stroke-dashoffset: -11; }
}

:where(.map-columns-dialog) .tm-conn-dot--compat { fill: #ff9800 !important; }
:where(.map-columns-dialog) .tm-conn-dot--incompat { fill: var(--bm-error) !important; }
:where(.map-columns-dialog) .tm-conn-dot--live { fill: var(--bm-teal-400) !important; }


/* Permanent connectors: the SVG itself is pointer-events:none so panel
   content stays clickable, but each connector group re-enables events on
   just itself via a wide invisible hit-path — this is what makes the
   (previously dead) hover-highlight actually work. */
:where(.map-columns-dialog) .tm-conn-group {
  pointer-events: all !important;
  cursor: pointer !important;
}


/* ng-click makes this focusable in some browsers, which draws a default
   focus rectangle spanning the group's whole bounding box on click — looks
   like a stray selection box. We show our own highlight (.nav-highlight on
   the endpoints) instead, so suppress the native one. */
:where(.map-columns-dialog) .tm-conn-group:focus,
:where(.map-columns-dialog) .tm-conn-group:focus-visible {
  outline: none !important;
}

:where(.map-columns-dialog) .tm-conn-hit {
  fill: none !important;
  stroke: transparent !important;
  stroke-width: 18 !important;
  pointer-events: visibleStroke !important;
}

.tm-conn-group--focused .connection-line--compat,
.tm-conn-group--focused .connection-line--incompat {
  stroke: var(--bm-teal-500) !important;
  stroke-width: 4 !important;
}

:where(.map-columns-dialog) .tm-conn-group--focused .tm-conn-dot--compat,
:where(.map-columns-dialog) .tm-conn-group--focused .tm-conn-dot--incompat {
  fill: var(--bm-teal-500) !important;
}




/* ── 7. Panels ────────────────────────────────────────────── */

:where(.map-columns-dialog) .columns-panel,
:where(.map-columns-dialog) .attributes-panel {
  display: flex !important;
  flex-direction: column !important;
  background: var(--bm-surface) !important;
  border-radius: var(--bm-r-lg) !important;
  border: 1px solid var(--bm-border) !important;
  box-shadow: var(--bm-shadow-sm) !important;
  overflow: hidden !important;
  /* Flex items default to min-width:auto (their widest content's
     min-content size). Without this, hiding the longest column/attribute
     name via the search filter (ng-hide) shrinks the panel, since that
     name was the one setting the floor on how narrow it could get. */
  min-width: 0 !important;
}

:where(.map-columns-dialog) .panel-header {
  display: flex !important;
  align-items: center !important;
  padding: 12px 16px !important;
  background: var(--bm-surface-3) !important;
  border-bottom: 1px solid var(--bm-border) !important;
  flex-shrink: 0 !important;
}

:where(.map-columns-dialog) .panel-header md-icon {
  font-size: 20px !important;
  margin-right: 8px !important;
  color: var(--bm-teal-500) !important;
}

:where(.map-columns-dialog) .panel-header h3 {
  font-family: var(--bm-font-display) !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--bm-text-primary) !important;
  letter-spacing: 0.1px !important;
}

:where(.map-columns-dialog) .column-count {
  margin-left: 6px !important;
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  color: var(--bm-text-muted) !important;
  font-weight: 400 !important;
}



/* ── Panel Search ─────────────────────────────────────────── */

:where(.map-columns-dialog) .panel-search {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  background: var(--bm-surface) !important;
  border-bottom: 1px solid var(--bm-border) !important;
  flex-shrink: 0 !important;
}

:where(.map-columns-dialog) .panel-search > md-icon:first-child {
  font-size: 16px !important;
  color: var(--bm-text-muted) !important;
  flex-shrink: 0 !important;
}

:where(.map-columns-dialog) .panel-search input {
  flex: 1 !important;
  min-width: 0 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-family: var(--bm-font-body) !important;
  font-size: 12.5px !important;
  color: var(--bm-text-primary) !important;
  padding: 2px 0 !important;
}

:where(.map-columns-dialog) .panel-search input::placeholder {
  color: var(--bm-text-muted) !important;
}

:where(.map-columns-dialog) .panel-search-clear {
  font-size: 16px !important;
  color: var(--bm-text-muted) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: color var(--bm-t) !important;
}

:where(.map-columns-dialog) .panel-search-clear:hover {
  color: var(--bm-error) !important;
}


/* Matching column/attribute cards — highlighted, not filtered out, so the
   rest of the list (and its mapping context) stays visible while searching. */
:where(.map-columns-dialog) .column-item.search-match,
:where(.map-columns-dialog) .attribute-item.search-match {
  border-color: var(--bm-teal-500) !important;
  box-shadow: 0 0 0 3px rgba(0,191,165,.20) !important;
}


/* Temporary flash on both ends of a mapping — clicking the connector, the
   mapped column, or the mapped attribute all land here (see .column-item,
   .attribute-item's existing `transition: var(--bm-t)` for the fade). */
.column-item.nav-highlight,
.attribute-item.nav-highlight {
  border-color: var(--bm-teal-500) !important;
  box-shadow: 0 0 0 4px rgba(0,191,165,.35) !important;
}

:where(.map-columns-dialog) .panel-content {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 8px !important;
  background: var(--bm-surface-2) !important;
}




/* ── 8. Item List ─────────────────────────────────────────── */

:where(.map-columns-dialog) .items-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}



.map-columns-dialog .attribute-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  overflow: hidden !important;
  position: relative !important;
}


/* Higher specificity than the rule above so ng-hide (search filtering)
   actually hides attribute rows instead of losing the display:flex fight. */
.map-columns-dialog .attribute-item.ng-hide {
  display: none !important;
}


/* ── 9. Column Items (left side) ──────────────────────────── */



:where(.map-columns-dialog) .column-item:active {
  cursor: grabbing !important;
}

:where(.map-columns-dialog) .column-item.dragging {
  opacity: 0.5 !important;
  border-color: var(--bm-teal-500) !important;
  box-shadow: 0 4px 12px rgba(0,191,165,.24) !important;
}

:where(.map-columns-dialog) .column-item:hover:not(.mapped) {
  border-color: var(--bm-teal-500) !important;
  box-shadow: 0 2px 8px rgba(0,191,165,.16) !important;
  transform: translateX(2px) !important;
}

:where(.map-columns-dialog) .column-item.mapped {
  background: var(--bm-teal-50) !important;
  border-color: var(--bm-teal-400) !important;
}




/* ── 10. Attribute Items (right side) ─────────────────────── */

:where(.map-columns-dialog) .attribute-item.drop-target {
  border-style: dashed !important;
  border-color: var(--bm-teal-400) !important;
}

:where(.map-columns-dialog) .attribute-item.drop-target.drag-over {
  background: var(--bm-teal-50) !important;
  box-shadow: 0 4px 12px rgba(0,191,165,.20) !important;
  transform: translateX(-2px) !important;
}


/* Live feedback while dragging over an attribute that's already mapped —
   the wire itself turns red/dashed (see .connection-line--invalid) and this
   grays the target out instead of inviting a drop that will be rejected. */
:where(.map-columns-dialog) .items-list.dragging-active .attribute-item.wire-invalid {
  opacity: .45 !important;
  pointer-events: none !important;
  border-color: var(--bm-error-border) !important;
  background: var(--bm-error-bg) !important;
}


/* As soon as ANY drag starts, every already-mapped attribute is a preview-
   invalid target — dimmed a touch more than the generic non-hovered opacity,
   so it's clear at a glance which attributes are off-limits for this drag,
   before you even hover one. */
:where(.map-columns-dialog) .items-list.dragging-active .attribute-item.wire-invalid-preview {
  opacity: .5 !important;
}

:where(.map-columns-dialog) .attribute-item.mapped {
  background: var(--bm-teal-50) !important;
  border-color: var(--bm-teal-400) !important;
}

:where(.map-columns-dialog) .attribute-item.required {
  border-left: 3px solid var(--bm-error) !important;
}

:where(.map-columns-dialog) .attribute-item.type-incompatible {
  background: var(--bm-error-bg) !important;
  border-color: var(--bm-error-border) !important;
  border-left: 3px solid var(--bm-error) !important;
}

:where(.map-columns-dialog) .items-list.dragging-active .attribute-item:not(.drag-over):not(.wire-invalid):not(.wire-invalid-preview) {
  opacity: 0.65 !important;
  transition: opacity var(--bm-t) !important;
}

:where(.map-columns-dialog) .items-list.dragging-active .attribute-item.drag-over {
  opacity: 1 !important;
  transform: scale(1.02) !important;
  box-shadow: 0 4px 16px rgba(0,191,165,.24) !important;
}


/* ── 11. Item Content ─────────────────────────────────────── */



:where(.map-columns-dialog) .column-item:active .drag-handle {
  cursor: grabbing !important;
}

:where(.map-columns-dialog) .item-name {
  font-family: var(--bm-font-body) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--bm-text-primary) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-bottom: 1px !important;
  flex-wrap: wrap !important;
  line-height: 1.3 !important;
}

:where(.map-columns-dialog) .item-type {
  font-family: var(--bm-font-mono) !important;
  font-size: 10.5px !important;
  color: var(--bm-text-muted) !important;
  line-height: 1.3 !important;
}

:where(.map-columns-dialog) .pk-icon {
  font-size: 14px !important;
  color: var(--bm-teal-500) !important;
}

:where(.map-columns-dialog) .mapped-icon {
  color: var(--bm-success) !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

:where(.map-columns-dialog) .drop-icon {
  color: var(--bm-teal-500) !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
  animation: bm-pulse-icon 1s ease-in-out infinite !important;
}

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




/* ── 12. Special Attribute Badges (PK / RN / RD) ─────────── */

.map-columns-dialog .attribute-item .item-name .special-badges-container,
:where(.map-columns-dialog) .attribute-item .item-name .special-badges-container,
:where(.map-columns-dialog) .special-badges-container {
  display: inline-flex !important;
  gap: 4px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  visibility: visible !important;
}

/* Badge base */
.map-columns-dialog .attribute-item .pk-badge,
.map-columns-dialog .attribute-item .rn-badge,
.map-columns-dialog .attribute-item .rd-badge,
.pk-badge,
.rn-badge,
.rd-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 2px 7px !important;
  font-family: var(--bm-font-body) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  border-radius: var(--bm-r-pill) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transition: var(--bm-t) !important;
  cursor: help !important;
  position: relative !important;
  visibility: visible !important;
}


/* PK — teal (matches mapper accent) */
:where(.map-columns-dialog) .pk-badge {
  background: var(--bm-teal-500) !important;
  color: var(--bm-navy-900) !important;
  box-shadow: 0 1px 3px rgba(0,191,165,.28) !important;
}



:where(.map-columns-dialog) .pk-badge:hover {
  box-shadow: 0 2px 6px rgba(0,191,165,.40) !important;
  transform: scale(1.05) !important;
}


/* RN — info blue */
:where(.map-columns-dialog) .rn-badge {
  background: var(--bm-info) !important;
  color: var(--bm-text-inverse) !important;
  box-shadow: 0 1px 3px rgba(37,99,235,.24) !important;
}

:where(.map-columns-dialog) .rn-badge md-icon,
.rn-badge .material-icons {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  line-height: 10px !important;
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  color: var(--bm-text-inverse) !important;
  margin: 0 !important;
}

:where(.map-columns-dialog) .rn-badge:hover {
  box-shadow: 0 2px 6px rgba(37,99,235,.36) !important;
  transform: scale(1.05) !important;
}


/* RD — brand violet */
:where(.map-columns-dialog) .rd-badge {
  background: var(--bm-violet-600) !important;
  color: var(--bm-text-inverse) !important;
  box-shadow: 0 1px 3px rgba(118,75,162,.24) !important;
}

:where(.map-columns-dialog) .rd-badge md-icon,
.rd-badge .material-icons {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  line-height: 10px !important;
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  color: var(--bm-text-inverse) !important;
  margin: 0 !important;
}

:where(.map-columns-dialog) .rd-badge:hover {
  box-shadow: 0 2px 6px rgba(118,75,162,.36) !important;
  transform: scale(1.05) !important;
}


/* Required / New inline badges */
:where(.map-columns-dialog) .required-badge,
:where(.map-columns-dialog) .new-badge {
  font-family: var(--bm-font-body) !important;
  display: inline-block !important;
  padding: 1px 7px !important;
  color: var(--bm-text-inverse) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  border-radius: var(--bm-r-pill) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  line-height: 1.2 !important;
}

:where(.map-columns-dialog) .required-badge {
  background: var(--bm-error) !important;
}

:where(.map-columns-dialog) .new-badge {
  background: var(--bm-success) !important;
  animation: bm-pulse-badge 1s ease-in-out 3 !important;
}

@keyframes bm-pulse-badge {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 rgba(5,150,105,.4); }
  50%       { transform: scale(1.15); box-shadow: 0 0 8px rgba(5,150,105,.5); }
}




/* ── 13. Mapping Info row ─────────────────────────────────── */

:where(.map-columns-dialog) .mapping-info {
  display: flex !important;
  align-items: center !important;
  margin-top: 4px !important;
  padding-top: 4px !important;
  border-top: 1px solid rgba(0,191,165,.18) !important;
  font-family: var(--bm-font-body) !important;
  font-size: 11px !important;
  color: var(--bm-text-muted) !important;
  gap: 4px !important;
  position: relative !important;
}

:where(.map-columns-dialog) .mapping-info md-icon {
  color: var(--bm-teal-500) !important;
  flex-shrink: 0 !important;
  font-size: 13px !important;
}

:where(.map-columns-dialog) .mapping-info span {
  flex: 1 !important;
  font-weight: 600 !important;
  color: var(--bm-teal-600) !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

:where(.map-columns-dialog) .remove-mapping-btn {
  min-width: 24px !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  z-index: 10 !important;
  position: relative !important;
  border-radius: var(--bm-r-sm) !important;
}

:where(.map-columns-dialog) .remove-mapping-btn md-icon {
  color: var(--bm-text-muted) !important;
  font-size: 16px !important;
  transition: color var(--bm-t) !important;
}

:where(.map-columns-dialog) .remove-mapping-btn:hover md-icon {
  color: var(--bm-error) !important;
}

:where(.map-columns-dialog) .remove-mapping-btn:hover {
  background: var(--bm-error-bg) !important;
}

:where(.map-columns-dialog) .remove-mapping-btn:active {
  background: var(--bm-error-border) !important;
}




/* ── 14. Type Incompatibility Warning ─────────────────────── */

.map-columns-dialog .attribute-item .type-incompatibility-warning,
:where(.map-columns-dialog) .attribute-item .type-incompatibility-warning,
:where(.map-columns-dialog) .type-incompatibility-warning {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  margin: 8px 0 0 0 !important;
  padding: 8px !important;
  background: var(--bm-error-bg) !important;
  border-radius: var(--bm-r-md) !important;
  border: 1px solid var(--bm-error-border) !important;
  border-left: 3px solid var(--bm-error) !important;
  font-size: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
  clear: both !important;
  order: 100 !important;
}

:where(.map-columns-dialog) .type-incompatibility-warning > div:first-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
}

:where(.map-columns-dialog) .type-incompatibility-warning md-icon {
  color: var(--bm-error) !important;
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.type-incompatibility-warning .warning-title {
  font-family: var(--bm-font-body) !important;
  font-weight: 700 !important;
  color: var(--bm-error) !important;
  font-size: 10px !important;
  margin: 0 !important;
  flex: 1 !important;
  white-space: nowrap !important;
}

.type-incompatibility-warning .warning-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.type-incompatibility-warning .warning-details {
  font-family: var(--bm-font-body) !important;
  font-size: 9px !important;
  color: var(--bm-error-text) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  width: 100% !important;
}

.type-incompatibility-warning .type-suggestion {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 4px !important;
  padding: 6px !important;
  background: var(--bm-surface) !important;
  border-radius: var(--bm-r-sm) !important;
  border: 1px solid var(--bm-error-border) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.type-suggestion > div:first-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
  width: 100% !important;
}

.type-suggestion-label {
  font-family: var(--bm-font-body) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: var(--bm-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

.type-suggestion span:not(.type-suggestion-label) {
  font-family: var(--bm-font-body) !important;
  font-size: 10px !important;
  color: var(--bm-text-secondary) !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

.type-suggestion strong {
  color: var(--bm-error) !important;
  font-weight: 700 !important;
}


/* Change type button */
:where(.map-columns-dialog) .type-incompatibility-warning .change-type-button,
.type-suggestion .change-type-button,
md-button.change-type-button {
  min-width: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 28px !important;
  line-height: 28px !important;
  padding: 0 8px !important;
  background: var(--bm-error) !important;
  color: var(--bm-text-inverse) !important;
  font-family: var(--bm-font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  border-radius: var(--bm-r-sm) !important;
  text-transform: none !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  box-sizing: border-box !important;
  transition: var(--bm-t) !important;
}

:where(.map-columns-dialog) .change-type-button:hover {
  background: var(--bm-error-text) !important;
}

:where(.map-columns-dialog) .change-type-button md-icon {
  font-size: 12px !important;
  width: 12px !important;
  height: 12px !important;
  color: var(--bm-text-inverse) !important;
  margin: 0 !important;
}

:where(.map-columns-dialog) .type-incompatibility-warning,
:where(.map-columns-dialog) .type-incompatibility-warning * {
  overflow-x: hidden !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
}

:where(.map-columns-dialog) .type-incompatibility-warning [layout="row"]:not(:first-child) {
  flex-direction: column !important;
}

:where(.map-columns-dialog) .type-incompatibility-warning div[flex],
:where(.map-columns-dialog) .type-incompatibility-warning > * > div[flex] {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}

:where(.map-columns-dialog) .attribute-item > div[layout="row"]:first-child {
  width: 100% !important;
  max-width: 100% !important;
}




/* ── 15. Drop Zone Indicator ──────────────────────────────── */

:where(.map-columns-dialog) .drop-zone-indicator {
  position: relative !important;
  height: 0 !important;
  margin: 4px 0 !important;
  padding: 0 !important;
  border: 2px dashed transparent !important;
  background: transparent !important;
  transition: all 0.25s cubic-bezier(.4,0,.2,1) !important;
  overflow: visible !important;
  pointer-events: auto !important;
  z-index: 100 !important;
  border-radius: var(--bm-r-md) !important;
  opacity: 0 !important;
}

:where(.map-columns-dialog) .items-list.dragging-active .drop-zone-indicator {
  height: 16px !important;
  margin: 8px 0 !important;
  opacity: 1 !important;
  border-color: rgba(0,191,165,.35) !important;
  background: var(--bm-teal-50) !important;
  pointer-events: auto !important;
  cursor: copy !important;
}

:where(.map-columns-dialog) .items-list.dragging-active .drop-zone-indicator.active {
  height: 64px !important;
  margin: 12px 0 !important;
  border-color: var(--bm-teal-500) !important;
  border-width: 3px !important;
  background: rgba(0,191,165,.06) !important;
  box-shadow: 0 4px 16px rgba(0,191,165,.18), inset 0 1px 3px rgba(0,191,165,.10) !important;
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  animation: bm-expand-zone .2s ease-out !important;
}

@keyframes bm-expand-zone {
  from { height: 16px; opacity: 0.7; transform: scaleY(0.5); }
  to   { height: 64px; opacity: 1;   transform: scaleY(1);   }
}

:where(.map-columns-dialog) .items-list.dragging-active .drop-zone-indicator.active::before {
  content: '+ Create New Attribute Here' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-family: var(--bm-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--bm-teal-600) !important;
  letter-spacing: 0.2px !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  animation: bm-pulse-text 1.5s ease-in-out infinite !important;
}

@keyframes bm-pulse-text {
  0%, 100% { opacity: 0.8;  transform: translate(-50%, -50%) scale(1);    }
  50%       { opacity: 1;    transform: translate(-50%, -50%) scale(1.03); }
}

:where(.map-columns-dialog) .items-list.dragging-active .drop-zone-indicator:not(.active):hover {
  height: 24px !important;
  border-color: var(--bm-teal-400) !important;
  background: var(--bm-teal-50) !important;
  box-shadow: 0 2px 8px rgba(0,191,165,.14) !important;
}

:where(.map-columns-dialog) .items-list.dragging-active .drop-zone-indicator.active + .attribute-item {
  transform: translateY(8px) !important;
  transition: transform 0.25s cubic-bezier(.4,0,.2,1) !important;
}




/* ── 16. Newly Created Attribute ──────────────────────────── */

:where(.map-columns-dialog) .attribute-item.newly-created {
  animation: bm-slide-in-from-column 0.5s cubic-bezier(0.34,1.56,0.64,1) !important;
  background: var(--bm-success-bg) !important;
  border-color: var(--bm-success-border) !important;
  border-left: 3px solid var(--bm-success) !important;
}

@keyframes bm-slide-in-from-column {
  0%   { transform: translateX(-350px) scale(0.8); opacity: 0; }
  60%  { transform: translateX(10px) scale(1.05);  opacity: 1; }
  100% { transform: translateX(0) scale(1);        opacity: 1; }
}




/* ── 17. Attribute Description ────────────────────────────── */

:where(.map-columns-dialog) .attribute-description {
  font-family: var(--bm-font-body) !important;
  font-size: 10px !important;
  color: var(--bm-text-muted) !important;
  line-height: 1.4 !important;
  margin-top: 4px !important;
  font-style: italic !important;
  max-width: 360px !important;
  width: 100% !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  display: block !important;
}




/* ── 18. Enum Values ──────────────────────────────────────── */

:where(.map-columns-dialog) .enum-values-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  margin-top: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  align-items: flex-start !important;
}

:where(.map-columns-dialog) .enum-values-label {
  font-family: var(--bm-font-body) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  color: var(--bm-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  justify-content: flex-start !important;
  width: auto !important;
  margin-bottom: 2px !important;
}

:where(.map-columns-dialog) .enum-values-label md-icon {
  font-size: 9px !important;
  width: 9px !important;
  height: 9px !important;
  color: var(--bm-text-muted) !important;
}

:where(.map-columns-dialog) .enum-values-table {
  width: auto !important;
  max-width: 350px !important;
  min-width: 180px !important;
  border-collapse: separate !important;
  border-spacing: 2px !important;
  table-layout: fixed !important;
  margin: 0 !important;
  padding: 0 !important;
}

:where(.map-columns-dialog) .enum-values-table tbody,
:where(.map-columns-dialog) .enum-values-table tr {
  width: 100% !important;
}

:where(.map-columns-dialog) .enum-values-table td {
  width: 50% !important;
  max-width: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  vertical-align: top !important;
  box-sizing: border-box !important;
}

:where(.map-columns-dialog) .enum-values-table td generic-type-pill {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
}

.enum-values-table td .env-pill {
  font-family: var(--bm-font-body) !important;
  font-size: 7px !important;
  padding: 2px 5px !important;
  border-radius: var(--bm-r-sm) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: center !important;
  display: block !important;
}

:where(.map-columns-dialog) .enum-values-container .enum-values-table {
  display: table !important;
}

:where(.map-columns-dialog) .enum-values-table * {
  box-sizing: border-box !important;
}




/* ── 19. Footer Actions ───────────────────────────────────── */

md-dialog-actions {
  padding: 14px 24px !important;
  background: var(--bm-surface) !important;
  border-top: 1px solid var(--bm-border) !important;
}


/* Confirm / primary gradient button */
:where(.map-columns-dialog) .gradient-button {
  font-family: var(--bm-font-body) !important;
  background: var(--bm-grad-brand) !important;
  color: var(--bm-text-inverse) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  border-radius: var(--bm-r-md) !important;
  text-transform: none !important;
  box-shadow: 0 3px 10px rgba(91,108,249,.22) !important;
  transition: var(--bm-t) !important;
}

:where(.map-columns-dialog) .gradient-button:not([disabled]):hover {
  box-shadow: 0 5px 16px rgba(91,108,249,.36) !important;
  transform: translateY(-1px) !important;
}

:where(.map-columns-dialog) .gradient-button[disabled] {
  opacity: 0.45 !important;
  background: var(--bm-border) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}



:where(.map-columns-dialog) .gradient-button[disabled] md-icon {
  color: var(--bm-navy-300) !important;
}


/* Cancel outlined */
:where(.map-columns-dialog) .md-button-outlined {
  font-family: var(--bm-font-body) !important;
  border: 1.5px solid var(--bm-border-strong) !important;
  color: var(--bm-text-secondary) !important;
  font-weight: 500 !important;
  border-radius: var(--bm-r-md) !important;
  text-transform: none !important;
  transition: var(--bm-t) !important;
}

:where(.map-columns-dialog) .md-button-outlined:hover {
  border-color: var(--bm-teal-500) !important;
  color: var(--bm-teal-600) !important;
  background: var(--bm-teal-50) !important;
}




/* ── 20. Scrollbars ───────────────────────────────────────── */

:where(.map-columns-dialog) .panel-content::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

:where(.map-columns-dialog) .panel-content::-webkit-scrollbar-track {
  background: var(--bm-surface-2) !important;
  border-radius: var(--bm-r-pill) !important;
}

:where(.map-columns-dialog) .panel-content::-webkit-scrollbar-thumb {
  background: var(--bm-border-strong) !important;
  border-radius: var(--bm-r-pill) !important;
}

:where(.map-columns-dialog) .panel-content::-webkit-scrollbar-thumb:hover {
  background: var(--bm-teal-500) !important;
}




/* ── 21. Tooltip pseudo-element — disable ─────────────────── */

:where(.map-columns-dialog) .pk-badge[title]:hover::after,
:where(.map-columns-dialog) .rn-badge[title]:hover::after,
:where(.map-columns-dialog) .rd-badge[title]:hover::after {
  content: none !important;
  display: none !important;
}


/* ── 22. Responsive ───────────────────────────────────────── */

@media (max-width: 1200px) {
  .map-columns-dialog {
    min-width: 900px !important;
  }

  :where(.map-columns-dialog) .info-value {
    font-size: 13px !important;
  }

  
  /* The 320px base gap (reserved for the SVG connector curves between the
     two panels) is fine once the dialog has room to breathe, but between
     this breakpoint and the next one at 900px the dialog's own min-width
     already shrank while this gap didn't — squeezing both panels down to
     almost nothing. The 900px breakpoint below already reduces it further;
     this fills the gap (no pun intended) between the two. */
  :where(.map-columns-dialog) .mapping-container > div[layout="row"] {
    gap: 110px !important;
  }
}

@media (max-width: 900px) {
  .map-columns-dialog {
    min-width: 700px !important;
  }

  :where(.map-columns-dialog) .mapping-container > div[layout="row"] {
    gap: 50px !important;
  }
}