/* ================================================================
   BIZMETRY DESIGN SYSTEM — edit-frame-dialog.css
   ================================================================
   Tokens → Dialog → Toolbar → Content → Table → Type Dropdown
   → Custom Panel → ENUM → Field Reference → Nested Table
   → Flags → Footer → Nested Columns Panel → Animations
   ================================================================ */

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

.edit-frame-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 ──────────────────────────────────────── */
  --bm-teal-600:  #009977;
  --bm-teal-500:  #00BFA5;
  --bm-teal-400:  #1AD4BA;
  --bm-teal-100:  #CCFAF3;
  --bm-teal-50:   #E6FAF7;

  /* ── Brand gradient (indigo → violet) ──────────────────── */
  --bm-indigo-600: #4756e8;
  --bm-indigo-500: #5b6cf9;
  --bm-indigo-200: #a5b4fc;
  --bm-indigo-50:  #eef0ff;
  --bm-violet-700: #6d28d9;
  --bm-violet-600: #764ba2;
  --bm-violet-500: #7c3aed;
  --bm-violet-400: #a855f7;
  --bm-violet-100: #ede9fe;
  --bm-violet-50:  #f5f3ff;
  --bm-grad-brand: linear-gradient(135deg, #5b6cf9 0%, #764ba2 100%);
  --bm-grad-ntbl:  linear-gradient(90deg,  #7c3aed 0%, #a855f7 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;

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


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

.edit-frame-dialog {
  max-width: 1600px !important;
  width: 98vw !important;
  max-height: 90vh !important;
  border-radius: var(--bm-r-xl) !important;
  overflow: hidden !important;
  box-shadow: var(--bm-shadow-lg) !important;
}




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

:where(.edit-frame-dialog) .frame-toolbar {
  background: var(--bm-grad-brand) !important;
  color: var(--bm-text-inverse) !important;
}

:where(.edit-frame-dialog) .frame-toolbar,
:where(.edit-frame-dialog) .frame-toolbar .md-toolbar-tools {
  height: auto !important;
  min-height: 80px !important;
}

:where(.edit-frame-dialog) .frame-toolbar .md-toolbar-tools {
  padding: 14px 72px 14px 24px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  text-align: left !important;
}


/* Angular Material centra el contenido del toolbar por defecto —
   forzamos el bloque título al inicio del flex container */
:where(.edit-frame-dialog) .frame-toolbar .md-toolbar-tools > md-icon.frame-icon,
:where(.edit-frame-dialog) .frame-toolbar .md-toolbar-tools > .frame-header-info {
  flex-shrink: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

:where(.edit-frame-dialog) .frame-icon {
  font-size: 30px !important;
  width: 30px !important;
  height: 30px !important;
  margin-right: 16px !important;
  color: var(--bm-text-inverse) !important;
  flex-shrink: 0 !important;
}

:where(.edit-frame-dialog) .frame-header-info {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  align-self: center !important;
  text-align: left !important;
  margin-right: 0 !important;
}

:where(.edit-frame-dialog) .frame-header-info h2 {
  font-family: var(--bm-font-display) !important;
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--bm-text-inverse) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.1px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: left !important;
}

:where(.edit-frame-dialog) .frame-subtitle {
  font-family: var(--bm-font-body) !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  margin-top: 3px !important;
  font-size: 13px !important;
  color: rgba(255,255,255,.75) !important;
  line-height: 1.35 !important;
}





:where(.edit-frame-dialog) .toolbar-close-btn:hover md-icon {
  color: var(--bm-text-inverse) !important;
}

:where(.edit-frame-dialog) .frame-toolbar-separator {
  width: 1px !important;
  height: 36px !important;
  background: rgba(255,255,255,.25) !important;
  margin: 0 20px !important;
  flex-shrink: 0 !important;
  align-self: center !important;
}

:where(.edit-frame-dialog) .frame-toolbar-context {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

:where(.edit-frame-dialog) .frame-toolbar-context-icon {
  color: rgba(255,255,255,.65) !important;
  font-size: 18px !important;
  height: 18px !important;
  width: 18px !important;
  flex-shrink: 0 !important;
}

:where(.edit-frame-dialog) .frame-toolbar-context-name {
  font-family: var(--bm-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--bm-text-inverse) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 220px !important;
}




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

.frame-content {
  padding: 24px !important;
  background: var(--bm-surface-2) !important;
  min-height: 400px !important;
  max-height: calc(90vh - 200px) !important;
  overflow-y: auto !important;
}

.edit-frame-dialog md-dialog-content.frame-content,
md-dialog.edit-frame-dialog > md-dialog-content {
  padding: 24px !important;
}

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




/* ── 5. Frame Info Section ────────────────────────────────── */

:where(.edit-frame-dialog) .frame-info-section {
  background: var(--bm-surface) !important;
  border-radius: var(--bm-r-lg) !important;
  border: 1px solid var(--bm-border) !important;
  border-left: 4px solid var(--bm-indigo-500) !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  padding: 20px !important;
  box-shadow: var(--bm-shadow-xs) !important;
}

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

:where(.edit-frame-dialog) .section-description {
  font-family: var(--bm-font-body) !important;
  margin: 0 !important;
  font-size: 13.5px !important;
  color: var(--bm-text-secondary) !important;
  line-height: 1.6 !important;
}

:where(.edit-frame-dialog) .section-description strong {
  color: var(--bm-text-primary) !important;
}




/* ── 6. Components Table Container ───────────────────────── */

:where(.edit-frame-dialog) .components-table-container {
  background: var(--bm-surface) !important;
  border-radius: var(--bm-r-lg) !important;
  border: 1px solid var(--bm-border) !important;
  overflow: visible !important;
  box-shadow: var(--bm-shadow-sm) !important;
  transition: box-shadow var(--bm-t) !important;
}

:where(.edit-frame-dialog) .components-table-container.table-is-dragging {
  box-shadow: 0 4px 20px rgba(91,108,249,.16) !important;
}

:where(.edit-frame-dialog) .components-table {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
  background: var(--bm-surface) !important;
  border-radius: var(--bm-r-lg) !important;
  overflow: visible !important;
  font-family: var(--bm-font-body) !important;
}

:where(.edit-frame-dialog) .components-table thead {
  background: var(--bm-surface-3) !important;
  border-bottom: 2px solid var(--bm-border) !important;
}

:where(.edit-frame-dialog) .components-table thead tr:first-child th:first-child { border-radius: var(--bm-r-lg) 0 0 0 !important; }
:where(.edit-frame-dialog) .components-table thead tr:first-child th:last-child { border-radius: 0 var(--bm-r-lg) 0 0 !important; }

:where(.edit-frame-dialog) .components-table th {
  padding: 13px 10px !important;
  text-align: left !important;
  font-family: var(--bm-font-body) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: var(--bm-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
}

:where(.edit-frame-dialog) .components-table tbody tr {
  border-bottom: 1px solid var(--bm-border-subtle) !important;
  transition: background var(--bm-t), opacity var(--bm-t) !important;
  cursor: pointer !important;
  position: relative !important;
}

:where(.edit-frame-dialog) .components-table tbody tr:last-child td:first-child { border-radius: 0 0 0 var(--bm-r-lg) !important; }
:where(.edit-frame-dialog) .components-table tbody tr:last-child td:last-child { border-radius: 0 0 var(--bm-r-lg) 0 !important; }
:where(.edit-frame-dialog) .components-table tbody tr:hover { background: var(--bm-navy-50) !important; }

:where(.edit-frame-dialog) .components-table tbody tr.selected-row {
  background: var(--bm-indigo-50) !important;
  border-left: 3px solid var(--bm-indigo-500) !important;
}

:where(.edit-frame-dialog) .components-table td {
  padding: 10px !important;
  font-family: var(--bm-font-body) !important;
  font-size: 13.5px !important;
  color: var(--bm-text-primary) !important;
  vertical-align: middle !important;
}




/* ── 7. Drag Handle ───────────────────────────────────────── */

:where(.edit-frame-dialog) .col-drag-handle {
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  padding: 0 !important;
}

:where(.edit-frame-dialog) .drag-handle-cell {
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  text-align: center !important;
  padding: 0 0 0 12px !important;
  cursor: grab !important;
  user-select: none !important;
  overflow: hidden !important;
}

:where(.edit-frame-dialog) .drag-handle-cell:active,
:where(.edit-frame-dialog) .table-is-dragging .drag-handle-cell { cursor: grabbing !important; }

:where(.edit-frame-dialog) .drag-handle-icon {
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
  color: var(--bm-navy-200) !important;
  transition: color var(--bm-t), transform var(--bm-t) !important;
  display: block !important;
  margin: 0 auto !important;
}

:where(.edit-frame-dialog) .components-table tbody tr:hover .drag-handle-icon {
  color: var(--bm-indigo-500) !important;
  transform: scale(1.1) !important;
}




/* ── 8. Drag & Drop Row States ────────────────────────────── */

:where(.edit-frame-dialog) .components-table tbody tr.row-dragging {
  opacity: 0.38 !important;
  background: var(--bm-indigo-50) !important;
  box-shadow: inset 0 0 0 2px var(--bm-indigo-500) !important;
}

:where(.edit-frame-dialog) .components-table tbody tr.row-drop-above {
  box-shadow: inset 0 4px 0 0 var(--bm-indigo-500) !important;
  background: rgba(91,108,249,.04) !important;
}

:where(.edit-frame-dialog) .components-table tbody tr.row-drop-below {
  box-shadow: inset 0 -4px 0 0 var(--bm-indigo-500) !important;
  background: rgba(91,108,249,.04) !important;
}

:where(.edit-frame-dialog) .components-table tbody tr.row-drop-above::before,
:where(.edit-frame-dialog) .components-table tbody tr.row-drop-below::after {
  content: '' !important;
  position: absolute !important;
  left: 0; right: 0 !important;
  height: 4px !important;
  background: var(--bm-grad-brand) !important;
  border-radius: 2px !important;
  z-index: 5 !important;
  pointer-events: none !important;
  animation: bm-pulse-line .9s ease-in-out infinite !important;
}

:where(.edit-frame-dialog) .components-table tbody tr.row-drop-above::before { top: -2px; }
:where(.edit-frame-dialog) .components-table tbody tr.row-drop-below::after { bottom: -2px; }

@keyframes bm-pulse-line {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

:where(.edit-frame-dialog) .table-is-dragging .components-table tbody tr:not(.row-drop-above):not(.row-drop-below):not(.row-dragging):hover {
  background: inherit !important;
}




/* ── 9. Sequence Badge ────────────────────────────────────── */

:where(.edit-frame-dialog) .sequence-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 26px !important;
  height: 26px !important;
  padding: 0 5px !important;
  background: var(--bm-surface-3) !important;
  color: var(--bm-text-secondary) !important;
  border-radius: var(--bm-r-pill) !important;
  font-family: var(--bm-font-display) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  border: 1px solid var(--bm-border-strong) !important;
  transition: background var(--bm-t), color var(--bm-t), transform var(--bm-t) !important;
}

:where(.edit-frame-dialog) .sequence-badge--moving {
  background: var(--bm-indigo-500) !important;
  color: var(--bm-text-inverse) !important;
  border-color: var(--bm-indigo-600) !important;
  transform: scale(1.15) !important;
}




/* ── 10. Type Cell & Dropdown ─────────────────────────────── */

:where(.edit-frame-dialog) .type-cell { position: relative !important; }

:where(.edit-frame-dialog) .type-selector {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  cursor: pointer !important;
  border-radius: var(--bm-r-pill) !important;
  padding: 2px 4px 2px 0 !important;
  transition: background var(--bm-t) !important;
  user-select: none !important;
  position: relative !important;
}

:where(.edit-frame-dialog) .type-selector:hover { background: rgba(91,108,249,.08) !important; }
:where(.edit-frame-dialog) .type-selector--open { background: rgba(91,108,249,.12) !important; }

:where(.edit-frame-dialog) .type-caret {
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  color: var(--bm-navy-300) !important;
  transition: transform var(--bm-t), color var(--bm-t) !important;
  flex-shrink: 0 !important;
}

:where(.edit-frame-dialog) .type-selector--open .type-caret,
:where(.edit-frame-dialog) .type-selector:hover .type-caret { color: var(--bm-indigo-500) !important; }
:where(.edit-frame-dialog) .type-selector--open .type-caret { transform: rotate(180deg) !important; }

:where(.edit-frame-dialog) .type-dropdown {
  position: absolute !important;
  z-index: 9999 !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  background: var(--bm-surface) !important;
  border-radius: var(--bm-r-lg) !important;
  box-shadow: var(--bm-shadow-lg) !important;
  border: 1px solid var(--bm-border) !important;
  padding: 6px !important;
  min-width: 190px !important;
  animation: bm-fade-slide-in .15s ease !important;
}

:where(.edit-frame-dialog) .type-dropdown--above {
  top: auto !important;
  bottom: calc(100% + 4px) !important;
}

:where(.edit-frame-dialog) .type-dropdown-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  border-radius: var(--bm-r-md) !important;
  cursor: pointer !important;
  transition: background var(--bm-t) !important;
  font-family: var(--bm-font-body) !important;
}

:where(.edit-frame-dialog) .type-dropdown-item:hover { background: var(--bm-indigo-50) !important; }
:where(.edit-frame-dialog) .type-dropdown-item--active { background: rgba(91,108,249,.08) !important; }

:where(.edit-frame-dialog) .type-check-icon {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  color: var(--bm-indigo-500) !important;
  flex-shrink: 0 !important;
}




/* ── 11. Details Cell ─────────────────────────────────────── */

:where(.edit-frame-dialog) .details-cell { vertical-align: top !important; padding-top: 12px !important; }

:where(.edit-frame-dialog) .component-details { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; }

:where(.edit-frame-dialog) .no-type-hint {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  color: var(--bm-text-muted) !important;
  font-family: var(--bm-font-body) !important;
  font-size: 13px !important;
  font-style: italic !important;
}

:where(.edit-frame-dialog) .no-type-hint md-icon {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  color: var(--bm-navy-200) !important;
}




/* ── 12. Custom Panel & Scalar Inputs ─────────────────────── */

:where(.edit-frame-dialog) .custom-edit-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  align-items: flex-start !important;
}

:where(.edit-frame-dialog) .scalar-type-row { display: flex !important; align-items: center !important; }

:where(.edit-frame-dialog) .scalar-type-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  padding: 6px 28px 6px 10px !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: 13px !important;
  font-weight: 500 !important;
  color: var(--bm-text-primary) !important;
  background-color: var(--bm-surface) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%235b6cf9' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  cursor: pointer !important;
  transition: border-color var(--bm-t), box-shadow var(--bm-t) !important;
  box-sizing: border-box !important;
}

:where(.edit-frame-dialog) .scalar-type-select:focus {
  outline: none !important;
  border-color: var(--bm-indigo-500) !important;
  box-shadow: 0 0 0 3px rgba(91,108,249,.10) !important;
}

:where(.edit-frame-dialog) .extra-fields-row { display: flex !important; align-items: flex-end !important; gap: 8px !important; flex-wrap: wrap !important; }

:where(.edit-frame-dialog) .mini-field { display: flex !important; flex-direction: column !important; gap: 3px !important; flex: 1 !important; min-width: 54px !important; }
:where(.edit-frame-dialog) .mini-field--narrow { flex: 0 0 70px !important; min-width: 70px !important; }
:where(.edit-frame-dialog) .mini-field--wide { flex: 2 !important; min-width: 110px !important; }

:where(.edit-frame-dialog) .mini-label {
  font-family: var(--bm-font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--bm-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
}

:where(.edit-frame-dialog) .mini-input {
  width: 100% !important;
  padding: 5px 8px !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: 13px !important;
  color: var(--bm-text-primary) !important;
  background: var(--bm-surface) !important;
  transition: border-color var(--bm-t), box-shadow var(--bm-t) !important;
  box-sizing: border-box !important;
}

:where(.edit-frame-dialog) .mini-input:focus {
  outline: none !important;
  border-color: var(--bm-indigo-500) !important;
  box-shadow: 0 0 0 3px rgba(91,108,249,.10) !important;
}

:where(.edit-frame-dialog) .mini-input--mono {
  font-family: var(--bm-font-mono) !important;
  font-size: 12px !important;
}

:where(.edit-frame-dialog) .mini-input[type="number"]::-webkit-inner-spin-button,
:where(.edit-frame-dialog) .mini-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
:where(.edit-frame-dialog) .mini-input[type="number"] { -moz-appearance: textfield; }




/* ── 13. ENUM Chips ───────────────────────────────────────── */

:where(.edit-frame-dialog) .enum-row { flex-direction: column !important; align-items: stretch !important; gap: 4px !important; }

:where(.edit-frame-dialog) .enum-chips-container {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 34px !important;
  padding: 5px 8px !important;
  border: 1.5px solid var(--bm-border) !important;
  border-radius: var(--bm-r-md) !important;
  background: var(--bm-surface) !important;
  cursor: text !important;
  transition: border-color var(--bm-t), box-shadow var(--bm-t) !important;
}

:where(.edit-frame-dialog) .enum-chips-container:focus-within {
  border-color: var(--bm-indigo-500) !important;
  box-shadow: 0 0 0 3px rgba(91,108,249,.10) !important;
}

:where(.edit-frame-dialog) .enum-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: var(--bm-grad-brand) !important;
  color: var(--bm-text-inverse) !important;
  font-family: var(--bm-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 8px 3px 10px !important;
  border-radius: var(--bm-r-pill) !important;
  white-space: nowrap !important;
  user-select: none !important;
  animation: bm-chip-in .15s ease !important;
}

@keyframes bm-chip-in {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1);   }
}

:where(.edit-frame-dialog) .enum-chip-remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.22) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background var(--bm-t) !important;
  flex-shrink: 0 !important;
}

:where(.edit-frame-dialog) .enum-chip-remove:hover { background: rgba(255,255,255,.48) !important; }

:where(.edit-frame-dialog) .enum-chip-input {
  flex: 1 !important;
  min-width: 90px !important;
  border: none !important;
  outline: none !important;
  font-family: var(--bm-font-body) !important;
  font-size: 13px !important;
  color: var(--bm-text-primary) !important;
  background: transparent !important;
  padding: 0 2px !important;
  line-height: 24px !important;
}

:where(.edit-frame-dialog) .enum-chip-input::placeholder { color: var(--bm-text-muted); font-style: italic; }
:where(.edit-frame-dialog) .enum-hint {
  font-family: var(--bm-font-body) !important;
  font-size: 10px !important;
  color: var(--bm-text-muted) !important;
  font-style: italic !important;
  padding-left: 2px !important;
}




/* ── 14. Delete Button ────────────────────────────────────── */

:where(.edit-frame-dialog) .component-delete-btn {
  min-width: 36px !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--bm-r-md) !important;
  background: var(--bm-surface-2) !important;
  transition: var(--bm-t) !important;
}

:where(.edit-frame-dialog) .component-delete-btn md-icon {
  color: var(--bm-text-muted) !important;
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
  transition: color var(--bm-t) !important;
}

:where(.edit-frame-dialog) .component-delete-btn:hover {
  background: var(--bm-error-bg) !important;
}

:where(.edit-frame-dialog) .component-delete-btn:hover md-icon {
  color: var(--bm-error) !important;
}

:where(.edit-frame-dialog) .component-delete-btn.btn-delete-pending {
  background: var(--bm-error-border) !important;
  animation: bm-pulse-red 1s ease-in-out infinite !important;
}

:where(.edit-frame-dialog) .component-delete-btn.btn-delete-pending md-icon {
  color: var(--bm-error-text) !important;
}

@keyframes bm-pulse-red {
  0%, 100% { background-color: var(--bm-error-border); box-shadow: 0 0 0 0 rgba(220,38,38,.5); }
  50%       { background-color: var(--bm-error-bg);     box-shadow: 0 0 0 4px rgba(220,38,38,.0); }
}




/* ── 15. Component Stats ──────────────────────────────────── */

:where(.edit-frame-dialog) .component-stats {
  display: flex !important;
  gap: 12px !important;
  margin-top: 20px !important;
  padding: 14px 16px !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-xs) !important;
  flex-wrap: wrap !important;
}



:where(.edit-frame-dialog) .stat-item md-icon {
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  color: var(--bm-indigo-500) !important;
}

:where(.edit-frame-dialog) .stat-label {
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  color: var(--bm-text-muted) !important;
  font-weight: 500 !important;
}

:where(.edit-frame-dialog) .stat-value {
  font-family: var(--bm-font-display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--bm-text-primary) !important;
}




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

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




/* Cancel */
:where(.edit-frame-dialog) .btn-secondary {
  background: var(--bm-surface) !important;
  color: var(--bm-text-secondary) !important;
  border: 1.5px solid var(--bm-border-strong) !important;
}

:where(.edit-frame-dialog) .btn-secondary:hover {
  background: var(--bm-surface-2) !important;
  border-color: var(--bm-navy-300) !important;
}


/* Add Component */
:where(.edit-frame-dialog) .btn-primary {
  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;
}

:where(.edit-frame-dialog) .btn-primary:hover {
  box-shadow: 0 5px 16px rgba(91,108,249,.36) !important;
  transform: translateY(-1px) !important;
}

:where(.edit-frame-dialog) .btn-primary md-icon {
  color: var(--bm-text-inverse) !important;
  margin-right: 4px !important;
}


/* Save */
.frame-actions .btn-save {
  background: var(--bm-success) !important;
  color: var(--bm-text-inverse) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(5,150,105,.20) !important;
}

.frame-actions .btn-save md-icon {
  color: var(--bm-text-inverse) !important;
  margin-right: 4px !important;
}

.frame-actions .btn-save:hover:not([disabled]) {
  background: var(--bm-teal-600) !important;
  box-shadow: 0 4px 12px rgba(5,150,105,.32) !important;
  transform: translateY(-1px) !important;
}

.frame-actions .btn-save.btn-save-disabled,
.frame-actions .btn-save[disabled] {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  background: var(--bm-border) !important;
  color: var(--bm-text-muted) !important;
  box-shadow: none !important;
}




/* ── 17. Invalid Field States ─────────────────────────────── */

:where(.edit-frame-dialog) .mini-input--invalid,
:where(.edit-frame-dialog) .enum-chips-container--invalid {
  border-color: var(--bm-error) !important;
  background: var(--bm-error-bg) !important;
  box-shadow: 0 0 0 2px rgba(220,38,38,.12) !important;
}

:where(.edit-frame-dialog) .mini-input--invalid { animation: bm-shake .3s ease !important; }

:where(.edit-frame-dialog) .mini-input--invalid:focus {
  border-color: var(--bm-error-text) !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.18) !important;
}

:where(.edit-frame-dialog) .enum-chips-container--invalid .enum-chip-input::placeholder {
  color: var(--bm-error-border) !important;
}

@keyframes bm-shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-4px); }
  75%       { transform: translateX(4px); }
}




/* ── 18. Inline Name / Description Editing ────────────────── */

:where(.edit-frame-dialog) .component-field-wrapper { display: flex !important; align-items: center !important; gap: 4px !important; }
:where(.edit-frame-dialog) .component-field-wrapper--desc { align-items: flex-start !important; }

:where(.edit-frame-dialog) .component-name-input {
  border: 1.5px solid transparent !important;
  background: transparent !important;
  border-radius: var(--bm-r-md) !important;
  font-family: var(--bm-font-body) !important;
  width: 100% !important;
  padding: 4px 6px !important;
  box-sizing: border-box !important;
  font-weight: 700 !important;
  color: var(--bm-text-primary) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  transition: border-color var(--bm-t), background var(--bm-t), box-shadow var(--bm-t) !important;
  cursor: default !important;
  pointer-events: none !important;
  resize: none !important;
}

:where(.edit-frame-dialog) .component-name-input.editable {
  pointer-events: all !important;
  cursor: text !important;
  border-color: var(--bm-indigo-500) !important;
  background: var(--bm-surface) !important;
  box-shadow: 0 0 0 3px rgba(91,108,249,.10) !important;
}

:where(.edit-frame-dialog) .component-name-input--invalid {
  border-color: var(--bm-error) !important;
  background: var(--bm-error-bg) !important;
  box-shadow: 0 0 0 2px rgba(220,38,38,.10) !important;
}

:where(.edit-frame-dialog) .component-desc-preview {
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  color: var(--bm-text-secondary) !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  flex: 1 !important;
  min-width: 0 !important;
  cursor: default !important;
  padding: 4px 6px !important;
}

:where(.edit-frame-dialog) .component-desc-preview--empty {
  color: var(--bm-navy-200) !important;
  font-style: italic !important;
}

:where(.edit-frame-dialog) .component-desc-input {
  border: 1.5px solid var(--bm-indigo-500) !important;
  background: var(--bm-surface) !important;
  border-radius: var(--bm-r-md) !important;
  font-family: var(--bm-font-body) !important;
  width: 100% !important;
  padding: 4px 6px !important;
  box-sizing: border-box !important;
  font-size: 12px !important;
  color: var(--bm-text-primary) !important;
  line-height: 1.4 !important;
  resize: vertical !important;
  box-shadow: 0 0 0 3px rgba(91,108,249,.10) !important;
  transition: border-color var(--bm-t), box-shadow var(--bm-t) !important;
}

:where(.edit-frame-dialog) .component-desc-input:focus { outline: none !important; }

:where(.edit-frame-dialog) .component-desc-input--invalid {
  border-color: var(--bm-error) !important;
  background: var(--bm-error-bg) !important;
  box-shadow: 0 0 0 2px rgba(220,38,38,.10) !important;
}


/* Inline edit button */
:where(.edit-frame-dialog) .component-edit-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  border-radius: 50% !important;
  border: 1.5px solid transparent !important;
  background: transparent !important;
  cursor: pointer !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  outline: none !important;
  transition: background var(--bm-t), border-color var(--bm-t) !important;
}

:where(.edit-frame-dialog) .component-edit-btn:hover,
:where(.edit-frame-dialog) .component-edit-btn.active {
  background: rgba(91,108,249,.10) !important;
  border-color: var(--bm-indigo-200) !important;
}

:where(.edit-frame-dialog) .component-edit-btn md-icon {
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
  color: var(--bm-navy-300) !important;
  margin: 0 !important;
  transition: color var(--bm-t) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

:where(.edit-frame-dialog) .component-edit-btn:hover md-icon,
:where(.edit-frame-dialog) .component-edit-btn.active md-icon { color: var(--bm-indigo-500) !important; }


/* Duplicate name error */
:where(.edit-frame-dialog) .component-name-duplicate-error {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 4px !important;
  font-family: var(--bm-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--bm-error) !important;
  animation: bm-fade-slide-in .18s ease !important;
}

:where(.edit-frame-dialog) .component-name-duplicate-error md-icon {
  font-size: 13px !important;
  width: 13px !important;
  height: 13px !important;
  color: var(--bm-error) !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}




/* ── 19. Component Flags Row ──────────────────────────────── */

.component-flags-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 10px !important;
  padding-top: 8px !important;
  border-top: 1px dashed var(--bm-border) !important;
  flex-wrap: wrap !important;
}

:where(.edit-frame-dialog) .component-flag-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px 4px 5px !important;
  border-radius: var(--bm-r-pill) !important;
  border: 1.5px solid var(--bm-border) !important;
  background: var(--bm-surface-2) !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: border-color var(--bm-t), background var(--bm-t) !important;
  white-space: nowrap !important;
}

:where(.edit-frame-dialog) .component-flag-toggle:hover {
  border-color: var(--bm-indigo-200) !important;
  background: var(--bm-indigo-50) !important;
}

:where(.edit-frame-dialog) .component-flag-toggle.flag-toggle--active {
  background: var(--bm-indigo-50) !important;
  border-color: var(--bm-indigo-500) !important;
}


/* Track */
:where(.edit-frame-dialog) .flag-toggle-track {
  position: relative !important;
  display: inline-block !important;
  width: 28px !important;
  height: 16px !important;
  border-radius: var(--bm-r-pill) !important;
  background: var(--bm-border-strong) !important;
  transition: background var(--bm-t) !important;
  flex-shrink: 0 !important;
}

:where(.edit-frame-dialog) .flag-toggle-track--on { background: var(--bm-grad-brand) !important; }


/* Sensitive track: error red when on */
:where(.edit-frame-dialog) .component-flag-toggle:has(.flag-icon-sensitive) .flag-toggle-track--on {
  background: linear-gradient(135deg, var(--bm-error) 0%, var(--bm-error-text) 100%) !important;
}


/* Thumb */
:where(.edit-frame-dialog) .flag-toggle-thumb {
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: var(--bm-text-inverse) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.18) !important;
  transition: transform var(--bm-t) !important;
}

:where(.edit-frame-dialog) .flag-toggle-track--on .flag-toggle-thumb { transform: translateX(12px) !important; }


/* Icon */
:where(.edit-frame-dialog) .flag-toggle-icon {
  font-size: 13px !important;
  width: 13px !important;
  height: 13px !important;
  min-height: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  transition: color var(--bm-t) !important;
}

:where(.edit-frame-dialog) .flag-icon-sensitive { color: var(--bm-navy-300) !important; }
:where(.edit-frame-dialog) .flag-icon-required { color: var(--bm-navy-300) !important; }

:where(.edit-frame-dialog) .flag-toggle--active .flag-icon-sensitive { color: var(--bm-error) !important; }
:where(.edit-frame-dialog) .flag-toggle--active .flag-icon-required { color: var(--bm-indigo-500) !important; }


/* Label */
:where(.edit-frame-dialog) .flag-toggle-label {
  font-family: var(--bm-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--bm-text-muted) !important;
  letter-spacing: 0.2px !important;
  transition: color var(--bm-t) !important;
}

:where(.edit-frame-dialog) .flag-toggle--active .flag-toggle-label { color: var(--bm-text-secondary) !important; }


/* FLAGS column */
:where(.edit-frame-dialog) .flags-cell { vertical-align: middle !important; padding: 10px 8px !important; }

:where(.edit-frame-dialog) .component-flags-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  align-items: flex-start !important;
}

:where(.edit-frame-dialog) .component-flags-col .component-flag-toggle {
  width: 100% !important;
  padding: 4px 8px 4px 5px !important;
}


/* Locked sensitive toggle */
:where(.edit-frame-dialog) .component-flag-toggle.flag-toggle--locked {
  cursor: not-allowed !important;
  opacity: 0.75 !important;
  border-color: var(--bm-error-border) !important;
  background: var(--bm-error-bg) !important;
  pointer-events: none !important;
}

:where(.edit-frame-dialog) .component-flag-toggle.flag-toggle--locked .flag-icon-sensitive {
  color: var(--bm-error) !important;
}




/* ── 20. Wide Tooltip ─────────────────────────────────────── */

.md-tooltip.wide-tooltip {
  max-width: min(1200px, calc(95vw - 80px)) !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.5 !important;
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  padding: 8px 12px !important;
  border-radius: var(--bm-r-md) !important;
}




/* ── 21. Shared Panel Styles (fref- + ntbl-) ──────────────── */

:where(.edit-frame-dialog) .fref-panel,
:where(.edit-frame-dialog) .ntbl-panel {
  display: flex !important;
  flex-direction: column !important;
  border-radius: var(--bm-r-lg) !important;
  overflow: hidden !important;
  min-width: 260px !important;
  max-width: 360px !important;
  transition: box-shadow var(--bm-t) !important;
}

:where(.edit-frame-dialog) .fref-panel {
  border: 1.5px solid var(--bm-indigo-200) !important;
  background: linear-gradient(160deg, #f8f9ff 0%, var(--bm-indigo-50) 100%) !important;
  box-shadow: 0 2px 8px rgba(91,108,249,.08) !important;
}

:where(.edit-frame-dialog) .fref-panel:hover { box-shadow: 0 4px 16px rgba(91,108,249,.14) !important; }

:where(.edit-frame-dialog) .ntbl-panel {
  border: 1.5px solid var(--bm-navy-100) !important;
  background: linear-gradient(160deg, #fafbff 0%, var(--bm-surface-3) 100%) !important;
  box-shadow: 0 2px 8px rgba(91,108,249,.07) !important;
}

:where(.edit-frame-dialog) .ntbl-panel:hover { box-shadow: 0 4px 16px rgba(91,108,249,.13) !important; }


/* Panel headers */
:where(.edit-frame-dialog) .fref-panel-header,
:where(.edit-frame-dialog) .ntbl-panel-header {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 8px 12px !important;
  flex-shrink: 0 !important;
}

:where(.edit-frame-dialog) .fref-panel-header { background: var(--bm-grad-brand) !important; }
:where(.edit-frame-dialog) .ntbl-panel-header { background: var(--bm-grad-ntbl) !important; }

:where(.edit-frame-dialog) .fref-header-icon,
:where(.edit-frame-dialog) .ntbl-header-icon {
  font-size: 15px !important;
  width: 15px !important;
  height: 15px !important;
  color: rgba(255,255,255,.85) !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

:where(.edit-frame-dialog) .fref-header-label,
:where(.edit-frame-dialog) .ntbl-header-label {
  font-family: var(--bm-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--bm-text-inverse) !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  flex: 1 !important;
}


/* Status / count badges */
:where(.edit-frame-dialog) .fref-status,
:where(.edit-frame-dialog) .ntbl-count-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 8px !important;
  border-radius: var(--bm-r-pill) !important;
  font-family: var(--bm-font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

:where(.edit-frame-dialog) .fref-status { gap: 4px !important; }

:where(.edit-frame-dialog) .fref-status md-icon {
  font-size: 11px !important;
  width: 11px !important;
  height: 11px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

:where(.edit-frame-dialog) .fref-status--ok {
  background: rgba(255,255,255,.18) !important;
  color: var(--bm-teal-100) !important;
  border: 1px solid rgba(204,250,243,.28) !important;
}

:where(.edit-frame-dialog) .fref-status--pending,
:where(.edit-frame-dialog) .ntbl-count-badge--empty {
  background: rgba(0,0,0,.14) !important;
  color: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

:where(.edit-frame-dialog) .ntbl-count-badge {
  background: rgba(255,255,255,.20) !important;
  color: var(--bm-text-inverse) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
}


/* Shared select wrappers */
:where(.edit-frame-dialog) .fref-select-wrapper,
:where(.edit-frame-dialog) .ntbl-select-wrapper {
  display: flex !important;
  align-items: center !important;
  background: var(--bm-surface) !important;
  border: 1.5px solid var(--bm-border) !important;
  overflow: hidden !important;
  transition: border-color var(--bm-t), box-shadow var(--bm-t) !important;
}

:where(.edit-frame-dialog) .fref-select-wrapper { border-radius: var(--bm-r-md) !important; box-shadow: var(--bm-shadow-xs) !important; }
:where(.edit-frame-dialog) .ntbl-select-wrapper { flex: 1 !important; border-radius: var(--bm-r-md) !important; box-shadow: var(--bm-shadow-xs) !important; }

:where(.edit-frame-dialog) .fref-select-wrapper:focus-within {
  border-color: var(--bm-indigo-500) !important;
  box-shadow: 0 0 0 3px rgba(91,108,249,.10) !important;
}

:where(.edit-frame-dialog) .ntbl-select-wrapper:focus-within {
  border-color: var(--bm-violet-500) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.10) !important;
}

:where(.edit-frame-dialog) .ntbl-select-wrapper--disabled { opacity: 0.5 !important; pointer-events: none !important; }

:where(.edit-frame-dialog) .fref-select-icon,
:where(.edit-frame-dialog) .ntbl-select-icon {
  color: var(--bm-navy-300) !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

:where(.edit-frame-dialog) .fref-select-icon { font-size: 14px !important; width: 14px !important; height: 14px !important; margin-left: 8px !important; }
:where(.edit-frame-dialog) .ntbl-select-icon { font-size: 13px !important; width: 13px !important; height: 13px !important; margin-left: 7px !important; }

:where(.edit-frame-dialog) .fref-select,
:where(.edit-frame-dialog) .ntbl-select {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  color: var(--bm-text-primary) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  min-width: 0 !important;
}

:where(.edit-frame-dialog) .fref-select { padding: 6px !important; }
:where(.edit-frame-dialog) .ntbl-select { padding: 5px 4px 5px 5px !important; }

:where(.edit-frame-dialog) .fref-select:disabled,
:where(.edit-frame-dialog) .ntbl-select:disabled { cursor: not-allowed !important; color: var(--bm-text-muted) !important; }

:where(.edit-frame-dialog) .fref-select-chevron,
:where(.edit-frame-dialog) .ntbl-select-chevron {
  color: var(--bm-navy-300) !important;
  pointer-events: none !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

:where(.edit-frame-dialog) .fref-select-chevron { font-size: 16px !important; width: 16px !important; height: 16px !important; margin-right: 6px !important; }
:where(.edit-frame-dialog) .ntbl-select-chevron { font-size: 14px !important; width: 14px !important; height: 14px !important; margin-right: 5px !important; }


/* Shared warnings */
:where(.edit-frame-dialog) .fref-warning,
:where(.edit-frame-dialog) .fref-incomplete-warning,
:where(.edit-frame-dialog) .ntbl-entry-warning {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--bm-font-body) !important;
  font-size: 11px !important;
  color: var(--bm-warning-text) !important;
  background: var(--bm-warning-bg) !important;
  border-radius: var(--bm-r-md) !important;
}

:where(.edit-frame-dialog) .fref-warning { font-weight: 500 !important; padding: 5px 9px !important; margin-top: 4px !important; border: 1px solid var(--bm-warning-border) !important; }
:where(.edit-frame-dialog) .fref-incomplete-warning { font-weight: 700 !important; padding: 5px 9px !important; border: 1.5px solid var(--bm-warning-border) !important; animation: bm-pill-in .2s ease !important; }

:where(.edit-frame-dialog) .ntbl-entry-warning {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 3px 0 0 26px !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  animation: bm-pill-in .15s ease !important;
}

:where(.edit-frame-dialog) .fref-warning md-icon,
:where(.edit-frame-dialog) .fref-incomplete-warning md-icon,
:where(.edit-frame-dialog) .ntbl-entry-warning md-icon {
  margin: 0 !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  color: var(--bm-warning) !important;
}

:where(.edit-frame-dialog) .fref-warning md-icon,
:where(.edit-frame-dialog) .fref-incomplete-warning md-icon { font-size: 14px !important; width: 14px !important; height: 14px !important; }
:where(.edit-frame-dialog) .ntbl-entry-warning md-icon { font-size: 12px !important; width: 12px !important; height: 12px !important; }




/* ── 22. Summary Chips & Arrows ───────────────────────────── */

:where(.edit-frame-dialog) .fref-summary-path {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
  flex: 1 !important;
  min-width: 0 !important;
}

:where(.edit-frame-dialog) .ntbl-entry-summary {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
  padding: 3px 0 0 26px !important;
  animation: bm-pill-in .2s ease !important;
}

:where(.edit-frame-dialog) .fref-summary-chip,
:where(.edit-frame-dialog) .ntbl-summary-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--bm-r-pill) !important;
  font-family: var(--bm-font-mono) !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1 !important;
}

:where(.edit-frame-dialog) .fref-summary-chip { font-size: 11px !important; gap: 4px !important; padding: 4px 9px 4px 6px !important; max-width: 130px !important; }
:where(.edit-frame-dialog) .ntbl-summary-chip { font-size: 10px !important; gap: 3px !important; padding: 4px 8px 4px 5px !important; max-width: 110px !important; }

:where(.edit-frame-dialog) .fref-summary-chip md-icon,
:where(.edit-frame-dialog) .ntbl-summary-chip md-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

:where(.edit-frame-dialog) .fref-summary-chip md-icon { font-size: 11px !important; width: 11px !important; height: 11px !important; }
:where(.edit-frame-dialog) .ntbl-summary-chip md-icon { font-size: 10px !important; width: 10px !important; height: 10px !important; }

:where(.edit-frame-dialog) .fref-summary-chip--resource,
:where(.edit-frame-dialog) .ntbl-summary-chip--resource {
  background: var(--bm-indigo-50) !important;
  color: var(--bm-indigo-600) !important;
  border: 1px solid var(--bm-indigo-200) !important;
}

:where(.edit-frame-dialog) .fref-summary-chip--resource md-icon { color: var(--bm-indigo-500) !important; }
:where(.edit-frame-dialog) .ntbl-summary-chip--resource md-icon { color: var(--bm-violet-500) !important; }

:where(.edit-frame-dialog) .fref-summary-chip--attr,
:where(.edit-frame-dialog) .ntbl-summary-chip--attr {
  background: var(--bm-success-bg) !important;
  color: var(--bm-success-text) !important;
  border: 1px solid var(--bm-success-border) !important;
}

:where(.edit-frame-dialog) .fref-summary-chip--attr md-icon,
:where(.edit-frame-dialog) .ntbl-summary-chip--attr md-icon { color: var(--bm-success) !important; }

:where(.edit-frame-dialog) .fref-summary-arrow,
:where(.edit-frame-dialog) .ntbl-summary-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

:where(.edit-frame-dialog) .fref-summary-arrow md-icon {
  font-size: 12px !important;
  width: 12px !important;
  height: 12px !important;
  color: var(--bm-indigo-200) !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

:where(.edit-frame-dialog) .ntbl-summary-arrow {
  font-size: 11px !important;
  width: 11px !important;
  height: 11px !important;
  color: var(--bm-indigo-200) !important;
  margin: 0 !important;
  vertical-align: middle !important;
}




/* ── 23. Field Reference — Specific ───────────────────────── */

:where(.edit-frame-dialog) .fref-step {
  display: flex !important;
  padding: 12px 12px 10px !important;
  transition: background var(--bm-t) !important;
}

:where(.edit-frame-dialog) .fref-step--resource { border-bottom: 1px solid rgba(91,108,249,.10) !important; }
:where(.edit-frame-dialog) .fref-step--done { background: rgba(91,108,249,.03) !important; }
:where(.edit-frame-dialog) .fref-step--locked { opacity: 0.55 !important; pointer-events: none !important; }

:where(.edit-frame-dialog) .fref-step-indicator {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 28px !important;
  flex-shrink: 0 !important;
  padding-top: 2px !important;
}

:where(.edit-frame-dialog) .fref-step-dot {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: var(--bm-surface) !important;
  border: 2px solid var(--bm-indigo-200) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--bm-font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--bm-indigo-500) !important;
  transition: all var(--bm-t) !important;
  box-shadow: 0 1px 4px rgba(91,108,249,.12) !important;
}

:where(.edit-frame-dialog) .fref-step--done .fref-step-dot {
  background: var(--bm-grad-brand) !important;
  border-color: var(--bm-violet-600) !important;
  color: var(--bm-text-inverse) !important;
  box-shadow: 0 2px 8px rgba(91,108,249,.30) !important;
}

:where(.edit-frame-dialog) .fref-step--done .fref-step-dot md-icon {
  font-size: 13px !important;
  width: 13px !important;
  height: 13px !important;
  color: var(--bm-text-inverse) !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

:where(.edit-frame-dialog) .fref-step-line {
  width: 2px !important;
  flex: 1 !important;
  min-height: 16px !important;
  border-radius: 1px !important;
  margin-top: 4px !important;
  background: linear-gradient(to bottom, var(--bm-indigo-200), rgba(165,180,252,.25)) !important;
}

:where(.edit-frame-dialog) .fref-step-body { flex: 1 !important; padding-left: 10px !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }

:where(.edit-frame-dialog) .fref-step-title {
  font-family: var(--bm-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--bm-text-secondary) !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
}

:where(.edit-frame-dialog) .fref-step-sub {
  font-family: var(--bm-font-body) !important;
  font-size: 11px !important;
  color: var(--bm-text-muted) !important;
  font-style: italic !important;
  margin-top: -2px !important;
}

:where(.edit-frame-dialog) .fref-step-sub--locked { color: var(--bm-indigo-200) !important; }

:where(.edit-frame-dialog) .fref-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  background: linear-gradient(90deg, rgba(91,108,249,.06) 0%, rgba(118,75,162,.06) 100%) !important;
  border-top: 1.5px solid rgba(91,108,249,.12) !important;
  animation: bm-fade-slide-up .25s ease !important;
}

:where(.edit-frame-dialog) .fref-clear-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(91,108,249,.22) !important;
  background: var(--bm-surface) !important;
  cursor: pointer !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  transition: background var(--bm-t), border-color var(--bm-t) !important;
  outline: none !important;
}

:where(.edit-frame-dialog) .fref-clear-btn:hover { background: var(--bm-error-bg) !important; border-color: var(--bm-error-border) !important; }
:where(.edit-frame-dialog) .fref-clear-btn:hover md-icon { color: var(--bm-error-text) !important; }

:where(.edit-frame-dialog) .fref-clear-btn md-icon {
  font-size: 13px !important;
  width: 13px !important;
  height: 13px !important;
  color: var(--bm-navy-300) !important;
  margin: 0 !important;
  transition: color var(--bm-t) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}




/* ── 24. Nested Table Inline Editor ───────────────────────── */

:where(.edit-frame-dialog) .ntbl-columns-list {
  display: flex !important;
  flex-direction: column !important;
  max-height: 340px !important;
  overflow-y: auto !important;
}

:where(.edit-frame-dialog) .ntbl-columns-list::-webkit-scrollbar { width: 5px; }
:where(.edit-frame-dialog) .ntbl-columns-list::-webkit-scrollbar-track { background: transparent; }
:where(.edit-frame-dialog) .ntbl-columns-list::-webkit-scrollbar-thumb { background: var(--bm-indigo-200); border-radius: var(--bm-r-pill); }
:where(.edit-frame-dialog) .ntbl-columns-list::-webkit-scrollbar-thumb:hover { background: var(--bm-indigo-500); }

:where(.edit-frame-dialog) .ntbl-empty {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 14px !important;
  color: var(--bm-text-muted) !important;
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  font-style: italic !important;
}

:where(.edit-frame-dialog) .ntbl-empty md-icon {
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  color: var(--bm-violet-400) !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

:where(.edit-frame-dialog) .ntbl-column-entry {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(91,108,249,.08) !important;
  background: var(--bm-surface) !important;
  transition: background var(--bm-t) !important;
  animation: bm-fade-slide-in .18s ease !important;
}

:where(.edit-frame-dialog) .ntbl-column-entry:last-child { border-bottom: none !important; }
:where(.edit-frame-dialog) .ntbl-column-entry:hover { background: var(--bm-violet-50) !important; }

:where(.edit-frame-dialog) .ntbl-column-entry--incomplete {
  background: var(--bm-warning-bg) !important;
  border-left: 3px solid var(--bm-warning-border) !important;
}

:where(.edit-frame-dialog) .ntbl-entry-header { display: flex !important; align-items: center !important; gap: 6px !important; }

:where(.edit-frame-dialog) .ntbl-entry-index {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 20px !important;
  border-radius: var(--bm-r-pill) !important;
  background: var(--bm-grad-ntbl) !important;
  color: var(--bm-text-inverse) !important;
  font-family: var(--bm-font-display) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

:where(.edit-frame-dialog) .ntbl-col-name-input {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 5px 9px !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: 12px !important;
  font-weight: 500 !important;
  color: var(--bm-text-primary) !important;
  background: var(--bm-surface) !important;
  transition: border-color var(--bm-t), box-shadow var(--bm-t) !important;
  box-sizing: border-box !important;
}

:where(.edit-frame-dialog) .ntbl-col-name-input:focus {
  outline: none !important;
  border-color: var(--bm-violet-500) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.10) !important;
}

:where(.edit-frame-dialog) .ntbl-col-name-input--invalid {
  border-color: var(--bm-error) !important;
  background: var(--bm-error-bg) !important;
}

:where(.edit-frame-dialog) .ntbl-col-name-input::placeholder { color: var(--bm-text-muted); font-style: italic; }

:where(.edit-frame-dialog) .ntbl-entry-delete-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--bm-border) !important;
  background: var(--bm-surface) !important;
  cursor: pointer !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  outline: none !important;
  transition: background var(--bm-t), border-color var(--bm-t) !important;
}

:where(.edit-frame-dialog) .ntbl-entry-delete-btn:hover { background: var(--bm-error-bg) !important; border-color: var(--bm-error-border) !important; }
:where(.edit-frame-dialog) .ntbl-entry-delete-btn:hover md-icon { color: var(--bm-error) !important; }

:where(.edit-frame-dialog) .ntbl-entry-delete-btn md-icon {
  font-size: 13px !important;
  width: 13px !important;
  height: 13px !important;
  color: var(--bm-navy-300) !important;
  margin: 0 !important;
  transition: color var(--bm-t) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

:where(.edit-frame-dialog) .ntbl-add-row {
  padding: 8px 10px !important;
  background: linear-gradient(to right, rgba(124,58,237,.04), transparent) !important;
  border-top: 1px dashed rgba(124,58,237,.18) !important;
  flex-shrink: 0 !important;
}

:where(.edit-frame-dialog) .ntbl-add-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 100% !important;
  padding: 5px 12px !important;
  border-radius: var(--bm-r-md) !important;
  border: 1.5px dashed rgba(124,58,237,.36) !important;
  background: transparent !important;
  color: var(--bm-violet-500) !important;
  font-family: var(--bm-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  outline: none !important;
  transition: background var(--bm-t), border-color var(--bm-t), border-style var(--bm-t) !important;
}

:where(.edit-frame-dialog) .ntbl-add-btn:hover {
  background: rgba(124,58,237,.07) !important;
  border-color: var(--bm-violet-500) !important;
  border-style: solid !important;
}

:where(.edit-frame-dialog) .ntbl-add-btn md-icon {
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
  color: var(--bm-violet-500) !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}




/* ── 25. Read-Only Nested Columns Panel ───────────────────── */

.nested-columns-panel {
  background: var(--bm-surface) !important;
  border-radius: var(--bm-r-xl) !important;
  box-shadow: var(--bm-shadow-lg) !important;
  border: 1px solid var(--bm-border) !important;
  width: 1000px !important;
  max-width: 95vw !important;
  max-height: 650px !important;
  display: flex !important;
  flex-direction: column !important;
}

.nested-panel-header {
  background: var(--bm-grad-brand) !important;
  padding: 20px 24px !important;
  border-radius: var(--bm-r-xl) var(--bm-r-xl) 0 0 !important;
  color: var(--bm-text-inverse) !important;
  flex-shrink: 0 !important;
}

.nested-panel-header-content { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.nested-panel-title-section { display: flex !important; align-items: center !important; }

.nested-panel-icon {
  color: var(--bm-text-inverse) !important;
  margin-right: 12px !important;
  font-size: 26px !important;
  width: 26px !important;
  height: 26px !important;
}

.nested-panel-title-text h2 {
  font-family: var(--bm-font-display) !important;
  margin: 0 !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  letter-spacing: -0.1px !important;
  color: var(--bm-text-inverse) !important;
}

.nested-panel-subtitle {
  font-family: var(--bm-font-body) !important;
  font-size: 13px !important;
  opacity: 0.8 !important;
  margin-top: 4px !important;
  color: var(--bm-text-inverse) !important;
}

.nested-panel-info-badge {
  padding: 14px 24px !important;
  background: var(--bm-surface-2) !important;
  border-bottom: 1px solid var(--bm-border) !important;
  flex-shrink: 0 !important;
}

.nested-panel-info-content { display: flex !important; align-items: center !important; color: var(--bm-text-secondary) !important; }
.nested-panel-info-icon { color: var(--bm-indigo-500) !important; margin-right: 8px !important; font-size: 20px !important; }
.nested-panel-info-text { font-family: var(--bm-font-body) !important; font-size: 13.5px !important; }

.nested-panel-table-container {
  flex: 1 !important;
  overflow: auto !important;
  background: var(--bm-surface) !important;
  min-height: 0 !important;
}

.nested-panel-table-container::-webkit-scrollbar { width: 8px; height: 8px; }
.nested-panel-table-container::-webkit-scrollbar-track { background: var(--bm-surface-2); }
.nested-panel-table-container::-webkit-scrollbar-thumb { background: var(--bm-border-strong); border-radius: var(--bm-r-pill); }
.nested-panel-table-container::-webkit-scrollbar-thumb:hover { background: var(--bm-navy-300); }
.nested-panel-table-container::-webkit-scrollbar-corner { background: var(--bm-surface-2); }

.nested-columns-table {
  width: 100% !important;
  min-width: 850px !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
  font-family: var(--bm-font-body) !important;
}

.nested-columns-table thead {
  position: sticky !important;
  top: 0 !important;
  background: var(--bm-surface-2) !important;
  z-index: 2 !important;
  border-bottom: 2px solid var(--bm-border) !important;
}

.nested-columns-table th {
  padding: 13px 20px !important;
  text-align: left !important;
  font-family: var(--bm-font-body) !important;
  font-weight: 700 !important;
  color: var(--bm-text-secondary) !important;
  font-size: 10.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

.nested-columns-table th.col-index { width: 70px !important; padding-left: 28px !important; }
.nested-columns-table th.col-name,
.nested-columns-table th.col-resource,
.nested-columns-table th.col-attribute { width: 30% !important; min-width: 220px !important; }

.nested-columns-table tbody tr { border-bottom: 1px solid var(--bm-border-subtle) !important; transition: background var(--bm-t) !important; }
.nested-columns-table tbody tr:nth-child(even) { background-color: var(--bm-surface-2) !important; }
.nested-columns-table tbody tr:hover { background-color: var(--bm-navy-50) !important; }

.nested-columns-table td {
  padding: 14px 20px !important;
  text-align: left !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-family: var(--bm-font-body) !important;
}

.nested-columns-table td.cell-index {
  color: var(--bm-text-muted) !important;
  font-family: var(--bm-font-display) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding-left: 28px !important;
}

.nested-column-name,
.nested-column-resource,
.nested-column-attribute {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.nested-column-name md-icon,
.nested-column-resource md-icon,
.nested-column-attribute md-icon {
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.nested-column-name md-icon { color: var(--bm-indigo-500) !important; }
.nested-column-resource md-icon { color: var(--bm-error) !important; }
.nested-column-attribute md-icon { color: var(--bm-success) !important; }

.nested-column-name span,
.nested-column-resource span,
.nested-column-attribute span { font-size: 13.5px !important; overflow: hidden !important; text-overflow: ellipsis !important; }

.nested-column-name span { font-weight: 600 !important; color: var(--bm-text-primary) !important; }
.nested-column-resource span,
.nested-column-attribute span { color: var(--bm-text-secondary) !important; }

.nested-panel-empty {
  padding: 48px 24px !important;
  text-align: center !important;
  color: var(--bm-text-muted) !important;
}

.nested-panel-empty md-icon { font-size: 56px !important; color: var(--bm-border-strong) !important; }

.nested-panel-empty p {
  margin-top: 16px !important;
  font-family: var(--bm-font-body) !important;
  font-size: 15px !important;
  color: var(--bm-text-muted) !important;
}

.nested-panel-footer {
  padding: 14px 24px !important;
  border-top: 1px solid var(--bm-border) !important;
  background-color: var(--bm-surface-2) !important;
  border-radius: 0 0 var(--bm-r-xl) var(--bm-r-xl) !important;
  display: flex !important;
  justify-content: flex-end !important;
  flex-shrink: 0 !important;
}


/* ── 26. Animations ───────────────────────────────────────── */

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

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

@keyframes bm-pill-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1);       }
}


/* ── 27. Responsive ───────────────────────────────────────── */

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

  :where(.edit-frame-dialog) .component-stats { flex-direction: column !important; }
  

  .nested-columns-panel { width: 95vw !important; max-height: 80vh !important; }

  .nested-columns-table th,
.nested-columns-table td { padding: 12px 16px !important; }

  .nested-columns-table th.col-index,
.nested-columns-table td.cell-index { padding-left: 20px !important; }
}