#MainCanvas .entity-navigation {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100% !important;
  max-width: 100%;
  margin: 0 0 14px 0;
  padding: 0;
  float: none !important;
  clear: both !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  box-sizing: border-box;
  isolation: isolate;
}


/*
 * Entity actions that belong to a data card are rendered after the fields.
 * This prevents legacy/bootstrap float rules from squeezing the next grid and
 * keeps navigation visually separate from editable/read-only values.
 */
#MainCanvas .entity-navigation--section-actions {
  margin: 18px 0 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.28);
}

#MainCanvas .entity-navigation + .edit-grid,
#MainCanvas .edit-grid + .entity-navigation {
  clear: both !important;
  width: 100% !important;
}

#MainCanvas .edit-form-card::after {
  content: "";
  display: table;
  clear: both;
}

#MainCanvas .entity-navigation__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid var(--skin-input-border, #cfd7e3);
  border-radius: var(--skin-field-radius, 12px);
  background: var(--skin-soft-btn-bg, #eef4ff);
  color: var(--skin-soft-btn-text, #1d4ed8);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: 0 5px 12px rgba(15, 23, 42, 0.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

#MainCanvas .entity-navigation__button:hover,
#MainCanvas .entity-navigation__button:focus {
  transform: translateY(-1px);
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.13);
}

/*
 * The global skin bridge styles every link with !important. Entity-action
 * buttons therefore need explicit, equally strong tone colours so their
 * labels and icons always remain readable on solid backgrounds.
 */
#MainCanvas a.entity-navigation__button--primary,
#MainCanvas a.entity-navigation__button--primary:visited,
#MainCanvas a.entity-navigation__button--primary:hover,
#MainCanvas a.entity-navigation__button--primary:focus {
  background: var(--skin-primary-btn-bg, #2563eb) !important;
  border-color: var(--skin-primary-btn-bg, #2563eb) !important;
  color: var(--skin-primary-btn-text, #ffffff) !important;
}

#MainCanvas a.entity-navigation__button--success,
#MainCanvas a.entity-navigation__button--success:visited,
#MainCanvas a.entity-navigation__button--success:hover,
#MainCanvas a.entity-navigation__button--success:focus {
  background: #15803d !important;
  border-color: #15803d !important;
  color: #ffffff !important;
}

#MainCanvas a.entity-navigation__button--warning,
#MainCanvas a.entity-navigation__button--warning:visited,
#MainCanvas a.entity-navigation__button--warning:hover,
#MainCanvas a.entity-navigation__button--warning:focus {
  background: #fff7ed !important;
  border-color: #fb923c !important;
  color: #9a3412 !important;
}

#MainCanvas a.entity-navigation__button--danger,
#MainCanvas a.entity-navigation__button--danger:visited,
#MainCanvas a.entity-navigation__button--danger:hover,
#MainCanvas a.entity-navigation__button--danger:focus {
  background: #fef2f2 !important;
  border-color: #ef4444 !important;
  color: #991b1b !important;
}

#MainCanvas .entity-navigation__button > span,
#MainCanvas .entity-navigation__button > i {
  color: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#MainCanvas .entity-navigation__button--soft:hover,
#MainCanvas .entity-navigation__button--soft:focus {
  border-color: var(--skin-focus-color, #3b82f6);
  background: #e8f0ff;
  color: var(--skin-link-hover-color, #1d4ed8);
}

@media (max-width: 767px) {
  #MainCanvas .entity-navigation {
    align-items: stretch;
  }

  #MainCanvas .entity-navigation__button {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* Dynamic entity navigation (Cycle 3) */
.entity-navigation[hidden],
.entity-navigation__button[hidden] {
  display: none !important;
}

.entity-navigation--dynamic {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.28);
}

@media (max-width: 767px) {
  .entity-navigation--dynamic .entity-navigation__button {
    flex: 1 1 100%;
  }
}