/* ================================================================
   BIZMETRY DESIGN SYSTEM — api-collection-dialog.css
   ================================================================
   Tokens → Dialog → Toolbar → Fixed Actions Bar → Content
   → Loading → Empty States → List Header → Rows → Status Badges
   → Status Stripes → Transition Buttons → Action Icons
   → List Footer → Swagger Viewer → Animations → Responsive
   ================================================================ */

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

.api-collections-dialog,
.swagger-viewer-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;

  /* ── Brand gradient ────────────────────────────────────── */
  --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-200: #ddd6fe;
  --bm-violet-100: #ede9fe;
  --bm-violet-50:  #f5f3ff;
  --bm-grad-brand: linear-gradient(135deg, #5b6cf9 0%, #764ba2 100%);

  /* ── Semantic ──────────────────────────────────────────── */
  --bm-success:        #059669;
  --bm-success-bg:     #ECFDF5;
  --bm-success-border: #6EE7B7;
  --bm-success-text:   #065F46;

  --bm-warning:        #D97706;
  --bm-warning-bg:     #FFFBEB;
  --bm-warning-border: #FCD34D;
  --bm-warning-text:   #92400E;

  --bm-error:          #DC2626;
  --bm-error-bg:       #FEF2F2;
  --bm-error-border:   #FECACA;
  --bm-error-text:     #991B1B;

  --bm-info:           #2563EB;
  --bm-info-bg:        #EFF6FF;
  --bm-info-border:    #BFDBFE;
  --bm-info-text:      #1E40AF;

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

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

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

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

  /* ── Typography ────────────────────────────────────────── */
  --bm-font-display: 'Outfit', system-ui, sans-serif;
  --bm-font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --bm-font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* ── Shadows ───────────────────────────────────────────── */
  --bm-shadow-xs: 0 1px 2px rgba(8,12,24,.06);
  --bm-shadow-sm: 0 1px 4px rgba(8,12,24,.08), 0 1px 2px rgba(8,12,24,.04);
  --bm-shadow-md: 0 4px 12px rgba(8,12,24,.10), 0 2px 4px rgba(8,12,24,.06);

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

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

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


/* Protect Material Icons */
.api-collections-dialog md-icon,
.api-collections-dialog .material-icons,
.swagger-viewer-dialog md-icon,
.swagger-viewer-dialog .material-icons {
  font-family: 'Material Icons' !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-feature-settings: 'liga' !important;
  -webkit-font-feature-settings: 'liga' !important;
}




/* ── 2. Dialog Shell ──────────────────────────────────────── */

.api-collections-dialog {
  width: 92vw !important;
  max-width: 1280px !important;
  /* Fixed (not min-) height — the content area fills it via flex:1, so
     switching between loading/list/empty states never changes the
     dialog's own size. Search/sort/pagination just swap what's inside a
     stable box instead of resizing the dialog itself on every keystroke. */
  height: 80vh !important;
  max-height: 90vh !important;
  border-radius: var(--bm-r-xl) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 20px 60px rgba(8,12,24,.20) !important;
}




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

:where(.api-collections-dialog, .swagger-viewer-dialog) .api-collections-toolbar {
  background: var(--bm-grad-brand) !important;
  box-shadow: 0 2px 12px rgba(91,108,249,.28) !important;
  min-height: 72px !important;
  flex-shrink: 0 !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .api-collections-toolbar .md-toolbar-tools {
  padding: 0 24px !important;
  min-height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-toolbar-icon {
  color: var(--bm-text-inverse) !important;
  font-size: 28px !important;
  width: 28px !important;
  height: 28px !important;
  flex-shrink: 0 !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-header-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 !important;
  min-width: 0 !important;
  align-items: flex-start !important;
}

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

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

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



:where(.api-collections-dialog, .swagger-viewer-dialog) .toolbar-close-btn:hover { background: rgba(255,255,255,.12) !important; }




/* ── 4. Fixed Actions Bar ─────────────────────────────────── */

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-fixed-actions {
  background: var(--bm-surface) !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--bm-border) !important;
  box-shadow: var(--bm-shadow-sm) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 72px !important;
  flex-shrink: 0 !important;
  flex-wrap: wrap !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-fixed-left { display: flex !important; align-items: center !important; gap: 10px !important; }
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-fixed-middle { display: flex !important; align-items: center !important; gap: 10px !important; }
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-fixed-right { display: flex !important; align-items: center !important; gap: 8px !important; margin-left: auto !important; }


/* Input containers */
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-search-container,
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-sort-container { margin: 0 !important; padding: 0 !important; }
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-search-container { min-width: 240px !important; position: relative !important; }
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-sort-container { min-width: 200px !important; }
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-pagesize-container {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 90px !important;
  max-width: 90px !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-search-container > label,
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-sort-container > label,
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-pagesize-container > label {
  position: static !important;
  font-family: var(--bm-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--bm-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 4px !important;
  transform: none !important;
  display: block !important;
}

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

.ac-pagesize-select .md-select-value {
  padding-right: 20px !important;
  min-width: 0 !important;
}


/* Controls */
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-select,
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-search-input {
  height: var(--ac-h-ctrl) !important;
  min-height: var(--ac-h-ctrl) !important;
  line-height: var(--ac-h-ctrl) !important;
  padding: 0 12px !important;
  font-family: var(--bm-font-body) !important;
  font-size: 13.5px !important;
  border: 1.5px solid var(--bm-border) !important;
  border-radius: var(--bm-r-md) !important;
  background: var(--bm-surface) !important;
  transition: var(--bm-t) !important;
  margin: 0 !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-select:focus,
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-search-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(.api-collections-dialog, .swagger-viewer-dialog) .ac-search-input {
  width: 100% !important;
  box-sizing: border-box !important;
  color: var(--bm-text-primary) !important;
  /* Reserved up front (not just while refreshing) so the spinner
     appearing/disappearing never shifts the input's text or width. */
  padding-right: 34px !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-search-input::placeholder { color: var(--bm-text-muted) !important; }

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-search-spinner {
  position: absolute !important;
  right: 10px !important;
  bottom: 0 !important;
  /* Anchored to the container's bottom edge (where the input sits) and
     sized to the input's own height, so the circle centers on the input
     row itself rather than the label above it. */
  height: var(--ac-h-ctrl) !important;
  display: flex !important;
  align-items: center !important;
  pointer-events: none !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-search-spinner circle {
  stroke: var(--bm-indigo-500) !important;
}

.ac-select .md-select-value {
  height: var(--ac-h-ctrl) !important;
  min-height: var(--ac-h-ctrl) !important;
  line-height: var(--ac-h-ctrl) !important;
  padding: 0 !important;
  font-family: var(--bm-font-body) !important;
  font-size: 13.5px !important;
  border: none !important;
  color: var(--bm-text-primary) !important;
}

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

.ac-select .md-select-value .md-select-icon {
  color: var(--bm-text-muted) !important;
}




/* ── 5. Pagination ────────────────────────────────────────── */

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 0 8px !important;
  align-self: flex-end !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-pagination-btn {
  width: var(--ac-h-ctrl) !important;
  height: var(--ac-h-ctrl) !important;
  min-width: var(--ac-h-ctrl) !important;
  min-height: var(--ac-h-ctrl) !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: var(--bm-r-md) !important;
  border: 1.5px solid var(--bm-border) !important;
  background: var(--bm-surface) !important;
  transition: var(--bm-t) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-pagination-btn:not([disabled]) {
  background: var(--bm-grad-brand) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(91,108,249,.22) !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-pagination-btn:not([disabled]):hover {
  box-shadow: 0 4px 14px rgba(91,108,249,.36) !important;
  transform: translateY(-1px) scale(1.04) !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-pagination-btn[disabled] {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  background: var(--bm-surface-2) !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-pagination-btn md-icon {
  font-size: 22px !important;
  width: 22px !important;
  height: 22px !important;
  line-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-pagination-btn:not([disabled]) md-icon { color: var(--bm-text-inverse) !important; }
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-pagination-btn[disabled] md-icon { color: var(--bm-navy-200) !important; }

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-pagination-info {
  font-family: var(--bm-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--bm-text-secondary) !important;
  white-space: nowrap !important;
  background: var(--bm-surface-2) !important;
  border: 1.5px solid var(--bm-border) !important;
  border-radius: var(--bm-r-md) !important;
  height: var(--ac-h-ctrl) !important;
  min-width: 120px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}




/* ── 6. New Collection Button ─────────────────────────────── */

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-new-btn {
  background: var(--bm-grad-brand) !important;
  color: var(--bm-text-inverse) !important;
  border-radius: var(--bm-r-md) !important;
  padding: 0 18px !important;
  height: var(--ac-h-ctrl) !important;
  min-height: var(--ac-h-ctrl) !important;
  font-family: var(--bm-font-body) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: none !important;
  box-shadow: 0 3px 10px rgba(91,108,249,.22) !important;
  transition: var(--bm-t) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-new-btn:hover {
  box-shadow: 0 5px 16px rgba(91,108,249,.36) !important;
  transform: translateY(-1px) !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-new-btn md-icon {
  margin: 0 !important;
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  color: var(--bm-text-inverse) !important;
}




/* ── 7. Dialog Content ────────────────────────────────────── */

.api-collections-content {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 0 !important;
  background: var(--bm-surface) !important;
}




/* ── 8. Loading State ─────────────────────────────────────── */

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-loading-wrapper {
  min-height: 400px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--bm-surface) !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-loading-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-loading-text {
  font-family: var(--bm-font-body) !important;
  color: var(--bm-text-muted) !important;
  font-size: 13.5px !important;
  font-style: italic !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-loading-wrapper md-progress-circular circle {
  stroke: var(--bm-indigo-500) !important;
}




/* ── 9. Empty States ──────────────────────────────────────── */

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-empty-wrapper {
  min-height: 48vh !important;
  padding: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--bm-surface) !important;
}

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

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-empty-card:hover {
  box-shadow: var(--bm-shadow-md) !important;
  transform: translateY(-2px) !important;
}

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

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-empty-icon--error {
  color: var(--bm-error) !important;
  animation: none !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-empty-title {
  font-family: var(--bm-font-display) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--bm-text-primary) !important;
  margin: 0 0 16px !important;
  letter-spacing: -0.1px !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-empty-text {
  font-family: var(--bm-font-body) !important;
  font-size: 14px !important;
  color: var(--bm-text-secondary) !important;
  line-height: 1.65 !important;
  margin: 0 0 24px !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-empty-btn {
  background: var(--bm-grad-brand) !important;
  color: var(--bm-text-inverse) !important;
  border-radius: var(--bm-r-md) !important;
  padding: 0 22px !important;
  height: var(--ac-h-ctrl) !important;
  min-height: var(--ac-h-ctrl) !important;
  font-family: var(--bm-font-body) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  text-transform: none !important;
  box-shadow: 0 3px 10px rgba(91,108,249,.22) !important;
  transition: var(--bm-t) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 auto !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-empty-btn:hover {
  box-shadow: 0 5px 16px rgba(91,108,249,.36) !important;
  transform: translateY(-1px) !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-empty-btn md-icon {
  color: var(--bm-text-inverse) !important;
  font-size: 17px !important;
  width: 17px !important;
  height: 17px !important;
  margin: 0 !important;
}





/* ── 10. Column Definitions ───────────────────────────────── */

/* The collection name gets all the free width; every other column is a
   fixed, compact width so headers and rows stay aligned regardless of
   how many actions a row shows. */
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-col-identity { flex: 1 1 auto;   min-width: 240px !important; }
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-col-status { flex: 0 0 128px;  min-width: 0 !important; }
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-col-version { flex: 0 0 80px;   min-width: 0 !important; }
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-col-operations { flex: 0 0 52px;   min-width: 0 !important; text-align: center !important; }
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-col-owner-changed { flex: 0 0 160px; min-width: 0 !important; }
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-col-actions { flex: 0 0 140px;  min-width: 0 !important; }

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-row .ac-col-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
}
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-list-header > .ac-col-actions { text-align: center !important; }
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-row .ac-col-operations { display: flex !important; justify-content: center !important; }


/* Owner / Changed — user and last-change timestamp stacked */
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-row__meta-cell {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  overflow: hidden !important;
  padding-right: 12px !important;
}
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-row__meta-user {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--bm-text-primary) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-row__meta-ts {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--bm-text-muted) !important;
  white-space: nowrap !important;
}


/* Icon-only transition buttons (label in the tooltip / aria-label) */
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-row .ac-tr-btn {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
}
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-row .ac-tr-btn md-icon { margin: 0 !important; }

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-ops-count {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: var(--bm-font-body) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--bm-text-secondary) !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-ops-count md-icon {
  font-size: 15px !important;
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  color: var(--bm-text-muted) !important;
}




/* ── 11. List Wrapper ─────────────────────────────────────── */

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-list-wrapper {
  background: var(--bm-surface) !important;
  border-radius: 0 0 var(--bm-r-xl) var(--bm-r-xl) !important;
  box-shadow: var(--bm-shadow-sm) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  opacity: 1 !important;
  transition: opacity .15s ease !important;
}


/* Background refresh (search/sort/page change) — the previous results
   stay on screen, just dimmed and non-interactive, instead of being
   replaced by the full loading spinner. */
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-list-wrapper--refreshing {
  opacity: 0.5 !important;
  pointer-events: none !important;
}


/* List header */
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-list-header {
  display: flex !important;
  align-items: center !important;
  padding: 0 16px 0 20px !important;
  height: 40px !important;
  background: var(--bm-surface-3) !important;
  border-bottom: 2px solid var(--bm-border) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-list-header > div {
  font-family: var(--bm-font-body) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: var(--bm-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  padding-right: 12px !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-list-header > .ac-col-actions { padding-right: 0 !important; }

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-list { display: flex !important; flex-direction: column !important; }




/* ── 12. Rows ─────────────────────────────────────────────── */

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-row {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  padding: 10px 16px 10px 20px !important;
  min-height: 64px !important;
  border-bottom: 1px solid var(--bm-border-subtle) !important;
  background: var(--bm-surface) !important;
  cursor: pointer !important;
  transition: background var(--bm-t), box-shadow var(--bm-t) !important;
  animation: bm-ac-row-fade-in .25s ease both !important;
  font-family: var(--bm-font-body) !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-row:last-child { border-bottom: none !important; }

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-row:hover {
  background: var(--bm-indigo-50) !important;
  box-shadow: inset 0 0 0 1px var(--bm-indigo-200) !important;
  z-index: 1 !important;
}


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




/* ── 13. Status Stripe ────────────────────────────────────── */

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-row__stripe {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background: var(--bm-border-strong) !important;
  transition: background var(--bm-t) !important;
}

.ac-row--draft .ac-row__stripe { background: var(--bm-navy-300) !important; }
.ac-row--pending_review .ac-row__stripe { background: var(--bm-warning) !important; }
.ac-row--approved .ac-row__stripe { background: var(--bm-info) !important; }
.ac-row--published .ac-row__stripe { background: var(--bm-success) !important; }
.ac-row--rejected .ac-row__stripe { background: var(--bm-error) !important; }
.ac-row--retired .ac-row__stripe { background: var(--bm-grad-brand) !important; opacity: 0.5 !important; }




/* ── 14. Identity Cell ────────────────────────────────────── */

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-row__identity {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding-right: 16px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-row__name {
  font-family: var(--bm-font-body) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--bm-text-primary) !important;
  /* Full name, never truncated: wraps onto a second line when needed. */
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.3 !important;
  max-width: 100% !important;
  display: block !important;
}

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

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-row__desc--empty {
  color: var(--bm-navy-200) !important;
  font-style: italic !important;
}





/* ── 14b. Version Tree ────────────────────────────────────── */
/* Versions hang from the version they were derived from. */

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-row__identity.ac-row__identity--tree {
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-row__identity-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-tree-indent {
  flex: 0 0 auto !important;
  align-self: stretch !important;
  position: relative !important;
}


/* L-shaped guide, same geometry as the template version tree (.vt-tree-guide) */
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-tree-guide {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 16px !important;
}
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-guide-v {
  position: absolute !important;
  left: 2px !important;
  top: -10px !important;
  bottom: 50% !important;
  width: 1px !important;
  background: var(--bm-navy-200) !important;
}
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-guide-h {
  position: absolute !important;
  left: 2px !important;
  top: 50% !important;
  width: 12px !important;
  height: 1px !important;
  background: var(--bm-navy-200) !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-tree-toggle {
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--bm-r-sm) !important;
  color: var(--bm-text-muted) !important;
  transition: background var(--bm-t), color var(--bm-t) !important;
}
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-tree-toggle:not(.ac-tree-toggle--leaf):hover {
  background: var(--bm-indigo-50) !important;
  color: var(--bm-indigo-600) !important;
}
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-tree-toggle--leaf { cursor: default !important; }
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-tree-toggle md-icon {
  font-size: 18px !important; width: 18px !important; height: 18px !important;
  min-width: 18px !important; min-height: 18px !important; line-height: 18px !important;
  margin: 0 !important; color: inherit !important;
  transition: transform var(--bm-t) !important;
}
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-tree-toggle--open md-icon { transform: rotate(90deg) !important; }

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-tree-count {
  flex: 0 0 auto !important;
  font-family: var(--bm-font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: var(--bm-r-pill) !important;
  background: var(--bm-violet-50) !important;
  color: var(--bm-violet-600) !important;
  border: 1px solid var(--bm-violet-200) !important;
}
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-tree-count:hover { background: var(--bm-violet-100) !important; }

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-from-hint {
  font-family: var(--bm-font-mono) !important;
  font-size: 10.5px !important;
  color: var(--bm-text-muted) !important;
  white-space: nowrap !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-row--child { background: var(--bm-surface-2) !important; }


/* Descriptions wrap (clamped to 3 lines; full text in the title tooltip). */
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-row__identity--tree .ac-row__desc {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-row--family-start { border-top: 1px solid var(--bm-border) !important; }



/* ── 15. Status Badge ─────────────────────────────────────── */

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-row__status { padding-right: 12px !important; }

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-family: var(--bm-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: var(--bm-r-pill) !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;   /* was inherited by accident from the old details stylesheet */
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-status-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}


/* Draft */
.ac-status-draft { background: var(--bm-surface-3) !important; color: var(--bm-text-muted) !important; }
.ac-status-draft .ac-status-dot { background: var(--bm-navy-300) !important; }


/* Pending Review */
.ac-status-pending_review { background: var(--bm-warning-bg) !important; color: var(--bm-warning-text) !important; }
.ac-status-pending_review .ac-status-dot { background: var(--bm-warning) !important; }


/* Approved */
.ac-status-approved { background: var(--bm-info-bg) !important; color: var(--bm-info-text) !important; }
.ac-status-approved .ac-status-dot { background: var(--bm-info) !important; }


/* Published */
.ac-status-published { background: var(--bm-success-bg) !important; color: var(--bm-success-text) !important; }
.ac-status-published .ac-status-dot { background: var(--bm-success) !important; }


/* Rejected */
.ac-status-rejected { background: var(--bm-error-bg) !important; color: var(--bm-error-text) !important; }
.ac-status-rejected .ac-status-dot { background: var(--bm-error) !important; }


/* Retired */
.ac-status-retired { background: var(--bm-violet-50) !important; color: var(--bm-violet-600) !important; opacity: 0.8 !important; }
.ac-status-retired .ac-status-dot { background: var(--bm-violet-500) !important; }





/* ── 16. Version & Author & Date Cells ───────────────────── */

/* Column layout: the version tree's "← vX" origin hint stacks under the pill. */
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-row__version {
  padding-right: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !important;
}

.ac-row__author { padding-right: 12px !important; }

.ac-row__author-value {
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  color: var(--bm-text-secondary) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

.ac-row__date-cell { padding-right: 12px !important; display: flex !important; align-items: center !important; }

.ac-row__date-value {
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  color: var(--bm-text-secondary) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-row__empty-val {
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  color: var(--bm-navy-200) !important;
  font-style: italic !important;
}




/* ── 17. Action Icons ─────────────────────────────────────── */

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

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-action-icon:hover {
  color: var(--bm-indigo-500) !important;
  background: var(--bm-indigo-50) !important;
  border-color: var(--bm-indigo-200) !important;
  transform: translateY(-1px) !important;
}


/* Delete icon */
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-action-icon--delete:hover {
  color: var(--bm-error) !important;
  background: var(--bm-error-bg) !important;
  border-color: var(--bm-error-border) !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-action-icon--delete-confirm {
  color: var(--bm-error) !important;
  background: var(--bm-error-bg) !important;
  border-color: var(--bm-error-border) !important;
  animation: bm-ac-pulse-delete 1s ease-in-out infinite !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-action-icon--delete-confirm:hover {
  background: var(--bm-error) !important;
  color: var(--bm-text-inverse) !important;
}


/* Delete icon — disabled because the collection is still referenced by a
   Business Event. Stays visible (not hidden) so the tooltip can explain why. */
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-action-icon--delete-disabled {
  color: var(--bm-text-muted) !important;
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-action-icon--delete-disabled:hover {
  color: var(--bm-text-muted) !important;
  background: transparent !important;
  border-color: transparent !important;
  transform: none !important;
}




/* ── 18. Transition Buttons ───────────────────────────────── */

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-tr-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 4px 12px !important;
  height: auto !important;
  min-height: 30px !important;
  min-width: 0 !important;
  line-height: 1.4 !important;
  border-radius: var(--bm-r-md) !important;
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 4px 0 0 !important;
  border: 1px solid transparent !important;
  transition: var(--bm-t) !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

.ac-tr-btn .md-ripple-container { border-radius: var(--bm-r-md) !important; }

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-tr-btn md-icon {
  font-size: 13px !important;
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  min-height: 13px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}


/* Lifecycle transition colors — kept intentionally functional/semantic */
.ac-tr-btn-tr-submit { background: var(--bm-warning-bg) !important; color: var(--bm-warning-text) !important; border-color: var(--bm-warning-border) !important; }
.ac-tr-btn-tr-approve { background: var(--bm-info-bg)    !important; color: var(--bm-info-text)    !important; border-color: var(--bm-info-border)    !important; }
.ac-tr-btn-tr-reject { background: var(--bm-error-bg)   !important; color: var(--bm-error-text)   !important; border-color: var(--bm-error-border)   !important; }
.ac-tr-btn-tr-publish { background: var(--bm-success-bg) !important; color: var(--bm-success-text) !important; border-color: var(--bm-success-border) !important; }
.ac-tr-btn-tr-retire { background: var(--bm-violet-50)  !important; color: var(--bm-violet-600)   !important; border-color: var(--bm-violet-200)     !important; }
.ac-tr-btn-tr-reopen { background: var(--bm-surface-3)  !important; color: var(--bm-text-secondary)!important; border-color: var(--bm-border-strong)  !important; }


/* Hover — one shade deeper per category */
.ac-tr-btn-tr-submit:hover { background: var(--bm-warning-border) !important; border-color: var(--bm-warning)       !important; }
.ac-tr-btn-tr-approve:hover { background: var(--bm-info-border)    !important; border-color: var(--bm-info)          !important; }
.ac-tr-btn-tr-reject:hover { background: var(--bm-error-border)   !important; border-color: var(--bm-error)         !important; }
.ac-tr-btn-tr-publish:hover { background: var(--bm-success-border) !important; border-color: var(--bm-success)       !important; }
.ac-tr-btn-tr-retire:hover { background: var(--bm-violet-100)     !important; border-color: var(--bm-violet-500)    !important; }


/* Transition blocked — e.g. Retire while still referenced by a Business Event.
   Stays visible (not hidden) so the tooltip can explain why. */
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-tr-btn--blocked {
  background: var(--bm-surface-3) !important;
  color: var(--bm-text-muted) !important;
  border-color: var(--bm-border-strong) !important;
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-tr-btn--blocked:hover {
  background: var(--bm-surface-3) !important;
  border-color: var(--bm-border-strong) !important;
}
.ac-tr-btn-tr-reopen:hover { background: var(--bm-navy-100)       !important; border-color: var(--bm-border-strong) !important; }




/* ── 19. List Footer ──────────────────────────────────────── */

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

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-list-count {
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  color: var(--bm-text-muted) !important;
}

:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-list-count strong {
  color: var(--bm-text-secondary) !important;
  font-weight: 600 !important;
}




/* ── 20. Custom Tooltip ───────────────────────────────────── */
/* Look standardized in common/styles/shared-components.css (.md-tooltip). */


/* Shared hand-rolled tooltip for the actions column — see the note by
   ctrl.showTooltip in ApiCollectionDialogController.js. Portaled to
   <body> and positioned in JS, so it isn't clipped/garbled by the
   dialog's own transformed containing block the way md-tooltip is. */
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-shared-tooltip {
  position: fixed !important;
  z-index: 4000 !important;
  max-width: 260px !important;
  transform: translateY(-100%) !important;
  background: rgba(51, 51, 51, 0.96) !important;
  color: white !important;
  font-family: var(--bm-font-body) !important;
  font-size: 12px !important;
  font-style: normal !important;
  line-height: 1.4 !important;
  padding: 8px 10px !important;
  border-radius: var(--bm-r-md) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  pointer-events: none !important;
}




/* ── 21. Swagger Viewer Dialog ────────────────────────────── */

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

.swagger-viewer-dialog .swagger-viewer-toolbar {
  background: var(--bm-grad-brand) !important;
  min-height: 64px !important;
  flex-shrink: 0 !important;
}

.swagger-viewer-dialog .swagger-viewer-toolbar .md-toolbar-tools {
  height: 64px !important;
  padding: 0 20px !important;
  gap: 12px !important;
  display: flex !important;
  align-items: center !important;
}

.swagger-viewer-dialog .toolbar-icon {
  color: rgba(255,255,255,.80) !important;
  font-size: 22px !important;
}

.swagger-viewer-dialog .toolbar-title {
  font-family: var(--bm-font-display) !important;
  color: var(--bm-text-inverse) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.swagger-viewer-dialog .toolbar-subtitle {
  font-family: var(--bm-font-body) !important;
  color: rgba(255,255,255,.60) !important;
  font-size: 12px !important;
}

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

.swagger-viewer-dialog .swagger-viewer-content {
  flex: 1 !important;
  overflow-y: auto !important;
  background: var(--bm-surface-2) !important;
}

#swagger-ui-container { height: 100% !important; }
#swagger-ui-container .swagger-ui .topbar { display: none !important; }
#swagger-ui-container .swagger-ui .info { margin: 20px 0 10px !important; }
#swagger-ui-container .swagger-ui .wrapper { padding: 0 24px !important; }


/* ── 22. Animations ───────────────────────────────────────── */

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

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

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


/* ── 23. Responsive ───────────────────────────────────────── */

@media (max-width: 900px) {
  :where(.api-collections-dialog, .swagger-viewer-dialog) .ac-col-owner-changed { display: none !important; }
  :where(.api-collections-dialog, .swagger-viewer-dialog) .ac-col-operations { display: none !important; }
}

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

  :where(.api-collections-dialog, .swagger-viewer-dialog) .ac-fixed-actions { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
  :where(.api-collections-dialog, .swagger-viewer-dialog) .ac-fixed-left,
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-fixed-middle,
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-fixed-right { width: 100% !important; margin-left: 0 !important; }
  :where(.api-collections-dialog, .swagger-viewer-dialog) .ac-list-header { display: none !important; }
  :where(.api-collections-dialog, .swagger-viewer-dialog) .ac-row { flex-wrap: wrap !important; padding: 12px 12px 12px 18px !important; gap: 8px !important; align-items: flex-start !important; }
  :where(.api-collections-dialog, .swagger-viewer-dialog) .ac-col-identity { width: 100% !important; flex: 0 0 auto !important; }
  :where(.api-collections-dialog, .swagger-viewer-dialog) .ac-col-owner-changed,
:where(.api-collections-dialog, .swagger-viewer-dialog) .ac-col-operations { display: none !important; }

  .swagger-viewer-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }
}

/* ── 24. Shared fixes — every API Collections dialog ──────────
   List, Create wizard, Edit, Details, Swagger editor, Swagger viewer.

   a) Toolbar titles: styles.css centers every h2 globally
      (h2 { text-align: center; margin-bottom: 20px }). Inside a
      title + subtitle column that pushes the title right of the
      subtitle — keep toolbar titles left-aligned, no stray margin.
   b) Icons inside buttons: Material's md-button is line-height based,
      which leaves md-icon sitting off the vertical center. Lay every
      button out as a flex row and center its icon box.            */

.api-collections-dialog .md-toolbar-tools h2,
.cac-dialog .md-toolbar-tools h2,
.ace-dialog .md-toolbar-tools h2,
.ac-detail-dialog .md-toolbar-tools h2,
.swe-dialog .md-toolbar-tools h2,
.swagger-viewer-dialog .md-toolbar-tools h2 {
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: flex-start !important;
}

.api-collections-dialog .md-button,
.cac-dialog .md-button,
.ace-dialog .md-button,
.ac-detail-dialog .md-button,
.swe-dialog .md-button,
.swagger-viewer-dialog .md-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.api-collections-dialog .md-button md-icon,
.cac-dialog .md-button md-icon,
.ace-dialog .md-button md-icon,
.ac-detail-dialog .md-button md-icon,
.swe-dialog .md-button md-icon,
.swagger-viewer-dialog .md-button md-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* Buttons that carry text next to the icon keep a consistent gap. */
.api-collections-dialog .md-button:not(.md-icon-button),
.cac-dialog .md-button:not(.md-icon-button),
.ace-dialog .md-button:not(.md-icon-button),
.ac-detail-dialog .md-button:not(.md-icon-button),
.swe-dialog .md-button:not(.md-icon-button),
.swagger-viewer-dialog .md-button:not(.md-icon-button) {
  gap: 6px;
}